关于vue-router当中addRoutes的使用

---

项目是越写越多，遇到的各种需求当然也逐渐增多。

在一个项目中，实现用户权限，似乎也成了必然。

---

一直以来，我也知道可以通过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的做法。

一定不能仅仅是在点击“登录”按钮之后做鉴权，毕竟刷新页面也是常见操作。