项目是越写越多，遇到的各种需求当然也逐渐增多。
在一个项目中，实现用户权限，似乎也成了必然。
一直以来，我也知道可以通过vue-router官方提供的一个api–>addRoutes可以实现路由添加的功能，事实上就也就实现了用户权限。
然而，看到官方文档的介绍，似乎也没办法理解怎么个用法。
官方介绍：
函数签名：
router.addRoutes(routes: Array<RouteConfig>)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。
就这么一句话，谁能跟我告诉我，我应该怎么用。
所以，一直也没有使用addRoutes来实现用户的鉴权。
近段时间，在整理项目中会常用的一些功能，认为有必要把用户鉴权[addRoutes]捡起来研究一下了。
真正的沉下心来研究的时候，其实也真没什么，似乎也就那么回事。怎么就拖了这么久了。。。
逻辑上，我们该怎么配置路由，还是怎么配置路由，唯一需要注意的地方在于，如果几条路由对用户权限有要求，那么就该稍微谨慎点了。
举个例子来说，系统上，一般情况下会有一个“用户管理”的模块，然而该模块并不需要对所有用户开放，仅仅具有“管理员”权限的用户才能看到该页面，并且进行操作。
那么，如果从源头上掐死，也就是确定是否配置该路由，那就直接确定下来用户是否能够看到该模块了。
基本上也就那么几种方法，常见的有：
export const asyncRoute = [
{
path: '/users',
name: 'Users',
component: () => import('@/views/Users'),
meta: {
title: '用户管理',
icon: 'user'
}
}
]
直接单独配置，然后确定用户是否拥有该权限，利用数组方法concat拼接到其他路由配置当中。
let rs = routes
if (+id === 1) { // id为1时，该用户拥有所有权限
rs = routes.concat(asyncRoute)
}
亦或者，在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
}
}
]
比如这种，然后在页面当中利用数组方法filter进行过滤。拥有所有权限，就直接使用，如果没有用户管理的权限，那就过滤掉auth为true的选项。
const routes = [].filter(item => !item.meta.auth)
不管怎么判断，只要区分出具体的权限，剩下的就是官方文档的示例了：
Router.addRoutes([...routes])
这里写上解构，主要是为了强调，addRoutes的参数一定是一个数组，也就是我们在router.config.js文件中配置的数组，格式完全一样。
到这里基本上鉴权就完成了。
需要注意的是，在哪里实现鉴权，可以覆盖到所有组件的.vue文件当中，或者单独写一个peimission.js的文件，类似于vue-element-admin的做法。
一定不能仅仅是在点击“登录”按钮之后做鉴权，毕竟刷新页面也是常见操作。
