vue 全局路由守衛

在開發管理端項目，常常需要根據當前登錄者獲取對應的權限和對應的菜單，展示不同的頁面。而如果不做全局路由守衛的話，手動改變url為項目中真實存在的路由地址時，頁面會正常跳轉，但是其實不應該讓用戶看到該頁面。

代碼邏輯如下：

 所有用戶都可以訪問白名單中的路由和自己能看到的menuList中的菜單

 但是如果用戶在url中直接修改，應該根據權限判斷是否能看到

 沒有權限則跳轉到noPerm頁面，此處需要注意如果瀏覽器的URL改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址

 next(false): 中斷當前的導航（參見vue router全局前置守衛文檔）

export default ({ app }) => {
  app.router.beforeEach((to, from, next) => {
    const menuList = sessionStorage.getItem('mainMenu');
    const whiteList = ['/login', '/noPerm', '/'];
    if (whiteList.includes(to.path)) {
      // 用戶手動或者瀏覽器后退按鈕改變url
      if (from.path === '/') {
        // 中斷當前的導航 否則跳轉到/路徑下，展示頁面不存在
        next(false);
      }
      next();
    } else if (menuList) {
      const menuPathList = JSON.parse(menuList).map((item) => item.path) || [];
      if (menuPathList.includes(to.path)) {
        next();
      } else {
        next({ path: '/noPerm', replace: true });
      }
    } else {
      next({ path: '/login' });
    }
  });
};