vue不同账户之间切换时的菜单路由权限管理

一、在路由文件index.js中 , 先配置一个初始路由列表，就是未登陆也能访问的页面，并加入到router中

let initMenu = [
  {
    path: '/',
    redirect: '/login'
  }, {
    path: '/login',
    name: 'login',
    component: Login
  }, {
    path: '/page404',
    name: 'page404',
    component: Page404
  }, {
    path: '*',
    name: 'error',
    component: ErrorPage
  }
]

const router = new Router({
  routes: initMenu
});

二、在登陆页面中配置所有菜单列表，就是所有页面的路由列表

allMenu: [
      {
        path: '/home',
        name: 'Home',
        component: Home,
        redirect: '/home/index',
        children: [
          // 首页
          {
            path: '/home/index',
            name: 'Index',
            component: Index,
            meta: {
              requireAuth: true,
              title: '首页',
              iconName: '#icon-fanhui',
            },
          }]
      }
   ]

三、在登陆页面中的登陆事件中，根据后台返回的权限标识与所有菜单列表做比较，得到目前权限下可访问的菜单列表，最后加入到router中

function searchMenu(allMenu) {
  let num = 0;
  if (allMenu) {
    for (let i = allMenu.length - 1; i >= 0; i--) {
      if (localStorage.getItem('authority_sign') //后端返回的权限标识，是数组类型
          .split(',')
          .indexOf(allMenu[i].name) === -1 && searchMenu(allMenu[i].children) === 0) {
        allMenu.splice(i, 1);
      } else {
        num = num + 1;
      }
    }
  }
  return num;
};


 this.searchMenu(this.allMenu);
 this.$router.options.routes = this.allMenu;
 this.$router.addRoutes(this.allMenu);
 this.$router.push({ name: 'Index' });