【vue --- metarouter.addRoutes】根据用户角色显示 相应路由相应权限相应菜单栏动态添加路由

在做项目时，需要考虑用户的角色不同，进入同一个系统看到的内容有所不同。比如页面内容不同，菜单栏不同，侧边栏不同等。 比如用户管理模块基本上只有管理员可见。比如非登录用户无法查看相应信息，比如相应角色才有相应模块功能。 所以在开发过程中需要考虑用户是否登录，需要考虑当前用户属于什么角色，什么模块是TA能看的，什么模块是不展示给TA看的。 由此，就需要做权限控制。可以从源头上，通过路由配置，判断相应角色是否有相应权限，来决定相应路由是否显示。

【实现以上需求可用到的知识点：router.addRoutes ，meta】

vue 中通过 router.addRoutes 来挂载路由，管理用户权限。

通过判断角色来决定是否配置路由，来决定用户是否能看到该模块。有几种方法：

1， 单独配置需要权限的路由：

export const asyncRoute = [ { path: '/users', name: 'Users', component: () => import('@/views/Users'), meta: { title: '用户管理', icon: 'user' } } ] 判断用户是否拥有权限，有权限的话将单独配置的路由信息拼接到其他路由配置当中： let rs = routes if (+id === 1) { // id为1时，该用户拥有所有权限 rs = routes.concat(asyncRoute) }

2，在meta属性【路由元信息meta官方文档】里面添加参数以确定是否需要鉴权：

[ { path: '/home', name: 'Home', component: () => import('@/views/Home'), meta: { title: '首页', icon: 's-home' } }, { path: '/monitor', name: 'Monitor', component: () => import('@/views/Monitor/Ing'), meta: { title: '设备状态监测', icon: 'monitor' } }, { path: '/users', name: 'Users', component: () => import('@/views/Users'), meta: { title: '用户管理', icon: 'user', auth: true //需要鉴权 //requireAuth: true 判断路由是否需要登录权限 这样表示该路由需要登录权限即需要token才能进入 在路由跳转之前作判断 } } ]

然后在页面当中利用过滤器 filter 【想了解vue过滤器请看这里】进行过滤。如果拥有所有权限，就直接使用；如果没有权限，那就过滤掉auth为true的选项。

const routes = [].filter(item => !item.meta.auth) 不管怎么判断，只要区分出具体的权限，剩下的就是官方文档的示例了： router.addRoutes(routes: Array<RouteConfig>) //addRoutes接收的参数一定是数组

注意

需要注意的是，鉴权操作需要覆盖到所有.vue文件中。毕竟除了登录需要鉴权，刷新页面，以及通过路径访问等都需要进行鉴权。

写本博参考博客

知识强化参考博客