return acc.concat(cur);
}, []).map(v => v.requestMapping);
return allRouter.filter(item => permissions.includes(item.meta.permitName));
},
/**
* 根据后台返回的权限，生成侧边栏
* @param {Array} permissionList 后台返回的用户权限列表
* @return {Array} sidebarMenu 生成的侧边栏数组
*/
getSidebarMenu(permissionList = []) {
let sidebarMenu = [];
permissionList.forEach(item => {
let menuItem = {
name: item.requestMapping,
title: item.moduleGroupName,
};
menuItem.children = (item.moduleList || []).map(child => ({
name: child.requestMapping,
title: child.moduleName,
}));
sidebarMenu.push(menuItem);
});
return sidebarMenu;
}
};
export default handleModule;
（3）上面得到过滤后的路由数组后，加入到 path 为 ‘/’ 的 children 下面
{
path: '/',
name: 'home',
component: () => import('@/views/home.vue'),
meta: {
requiresAuth: true,
},
children: [
/* 将上面得到的路由加入到这里 */
// 用户信息
{
path: '/user-info',
name: 'user-info',
component: () => import('@/views/user-setting/user-info.vue'),
},
]}
（4）上面根据权限生成侧边栏菜单之后，保存在 store 待用。
（5）上面第三步将动态路由加入到 home 的 children 之后，就可以将 dynamicRoutes 加入到路由中了。router.addRoutes(dynamicRoutes);
（6）到了这里，路由就添加完了，也就是 FETCH_PERMISSION 操作完毕了，就可以在 action.then 里面调用 next({ path: to.path, query: to.query }); 进去路由，也就是进入 home。我们上面已经将 home 路由重定向为菜单的第一个路由信息，所以会进入系统菜单的第一个页面。
刷新页面后，根据 router.beforeEach 的判断，有 token 但是没有 permissionList ，会重新触发 action 去发请求获取用户权限，之前的逻辑会重新走一遍，所以没有问题。
退出登录后，需要清除 token 并刷新页面。因为是通过 addRoutes 添加路由的，而 vue-router 没有删除路由的 api，所以清除路由、清除 store 中存储的各种信息，刷新页面是最保险的。
相关文件的目录截图：
四、总结
缺点：
全局路由守卫里，每次路由跳转都要做判断；
每次刷新页面，需要重新发请求获取用户权限；
退出登录时，需要刷新一次页面将动态添加的路由以及权限信息清空；
优点：
菜单与路由分离，菜单的修改、添加、删除由后端控制，利于后期维护；
