关于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的做法。

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