路由許可權控制可以分為兩種粒度

• 一是頁面級的粒度，只要在路由跳轉的時候做個判斷就好了
• 二是元素級的粒度，這個就需要上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-router4的思路