react路由权限控制

路由权限控制可以分为两种粒度

• 一是页面级的粒度，只要在路由跳转的时候做个判断就好了
• 二是元素级的粒度，这个就需要上react高阶组件了

页面级粒度——dva在model中判断

权限认证和登陆判断一般是分不开的

//  注册全局model 
subscriptions: {
    setup({ dispatch, history }) {
      console.log(history.location.pathname);
      //  曾经登录过，调到该权限可以看到的界面
      if(!!isLogin()){
        if(history.location.pathname === '/'){
            //  根据角色跳到该角色的首页
          router.replace(toPage(role))
        }
          //    没有权限跳到login
        if(! isAuthed(history.location.pathname)){
          router.replace('/login')
        }
      }else {
        router.replace('/login')
      }

      return history.listen(({ pathname ,query}) => {
          // 路由一旦改变就会进入执行
          // 当logout时，进入login会陷入死循环，所以加了层判断
        if(pathname !== '/login'){
          if (!!isLogin()) {
            dispatch({type: 'loginStatus', payload: {isLogin: true}});
            if(!!isAuthed(pathname)){
              dispatch({type: 'authStatus', payload: {isAuthed: true}})
            }else {
              router.replace('/login')
            }
          }else {
            dispatch({type: 'loginStatus', payload: {isLogin: false}});
            router.replace('/login')
          }
        }
      });
    },
  },

• 判断登陆（isLogin）和判断权限（isAuthed）的函数都是抽离在utils文件中的
• 不管是否需要后端进行验证，抽离出路由（或组件）和权限的配置文件是很重要的事情

元素级粒度——react-router4

react-router有个权限路由的例子

原生路由原理

HTML5 history API 解析

react-router4的思路

react-router使用源码解析