菜单权限控制 ---> 不同权限的用户可访问的页面是不同的 可访问的页面--->路由
路由一般分为 常量路由(所有人都可以访问),动态路由(通过权限控制的路由),任意路由(当访问的路由不存在时,跳转到的页面)
步骤一
- 拆分路由,拆为常量路由,异步路由和任意路由
步骤二
1.获取用户信息成功后后台所返回的动态路由
- 将异步路由和后台所返回的路由进行比对,过滤,封装成一个函数,
javascript
// 用于过滤当前用户需要展示的异步路由
function filterAsyncRoute(asyncRoute: any, routes: any) {
return asyncRoute.filter((item: any) => {
// 判断路由表中是否包含异步路由
if (routes.includes(item.name)) {
// 判断是否有子路由
if (item.children && item.children.length > 0) {
// 递归子路由
item.children = filterAsyncRoute(item.children, routes);
}
return true;
}
});
}
- 在获取用户信息处调用该函数,并注册新的路由表
javascript
// 获取用户信息
userInfo() {
let res = await reUserInfo();
// console.log(res.data);
if (res.code == 200) {
this.username = res.data.name;
this.avatar = res.data.avatar;
this.buttons = res.data.buttons;
// 调用异步路由,计算当前路由所需要的异步路由
let UserRoute = filterAsyncRoute(
cloneDeep(asyncRoute),
res.data.routes
);
// 生成新的路由表
this.menuRoutes = [...contanceRoute, ...UserRoute, anyRoute];
// 注册路由
[...UserRoute, anyRoute].forEach((route) => {
router.addRoute(route);
});
//打印当前的全部路由
// console.log(router.getRoutes());
return "ok";
} else {
return Promise.reject(new Error(res.data.message));
}
},
以上即可实现菜单的权限控制