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' });
    }
  });
};