需求: 根据不同角色的登录人,展示不同的功能模块. 前端路由在后台维护,动态注册路由.
流程:
首先,登录成功,获取token
其次,通过在请求头携带当前登录人的token,调取module的接口
axios(‘module.list‘).then(res => {
if (res.data.status === 200) {
this.moduleList = res.data.res;
}
})
接着,处理数据格式,主要是component的格式是,例如: import(`@view/user/${item.path}`)
this.newAddRouter = this.moduleList.map(item => {
return {
code: item.code,
icon: item.iconUrl,
name: item.routerPath,
path: item.routerPath,
title: item.name,
id: item.id,
component: () => import(`@/views/tv/tv-nine/${item.path}`), // 正确的写法
// component: () => import(`${item.path}`), // 报错 theme.js" as it exceeds the max of "500KB".
parentId: item.parentId,
children: []
};
});
此处省略递归处理
最后,通过this.addroutes()注册动态路由
this.$router.addroutes(newAddRouter);
注: 由于我们的需求是在登录成功后才根据登录人的角色动态生成模块,而router是在vue实例化的时候就已经注册挂载,所以,官方提供了一个动态的注册的api,它就是addroutes.
vue-router 根据权限动态设置路由 theme.js" as it exceeds the max of "500KB".
原文：https://www.cnblogs.com/web-zqk/p/11729550.html