antd vue配置路由访问权限_6 种 Vue 权限路由实现方式总结(最全)

转载：https://cloud.tencent.com/developer/article/1449210

① 使用全局路由守卫

实现

前端定义好路由，并且在路由上标记相应的权限信息

const routerMap = [
{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index',
  alwaysShow: true, 
  meta: {
    title: 'permission',
    icon: 'lock',
    roles: ['admin', 'editor'] 
  },
  children: [{
    path: 'page',
    component: () => import('@/views/permission/page'),
    name: 'pagePermission',
    meta: {
     title: 'pagePermission',
     roles: ['admin'] 
     }
   }, {
    path: 'directive',
    component: () => import('@/views/permission/directive'),
    name: 'directivePermission',
    meta: {
      title: 'directivePermission'

    }
  }]
}]

全局路由守卫每次都判断用户是否已经登录，没有登录则跳到登录页。

已经登录 (已经取得后台返回的用户的权限信息(角色之类的))，则判断当前要跳转的路由，用户是否有权限访问 (根据路由名称到全部路由里找到对应的路由，判断用户是否具备路由上标注的权限信息 (比如上面的roles : [ 'admin', 'editor' ]))。

没有权限则跳到事先定义好的界面 ( 403、404 之类的)。

这种方式，菜单可以直接用路由生成 (用户没有权限的菜单也会显示，点击跳转的时候才做权限判断)，也可以在用户登录后根据用户权限把

路由过滤一遍生成菜单 (菜单需要保存在 vuex 里)。

目前 iview-admin 还是用的这种方式

• 加载所有的路由，如果路由很多，而用户并不是所有的路由都有权限访问，对性能会有影响。
• 全局路由守卫里，每次路由跳转都要做权限判断。
• 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译。
• 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。

② 登录页与主应用分离

针对前一种实现方式的缺点，可以将登录页与主应用放到不同的页面 (不在同一个 Vue 应用实例里)。

实现

登录成功后，进行页面跳转 (真正的页面跳转，不是路由跳转)，并将用户权限传递到主应用所在页面，主应用初始化之前，根据用户权限筛

选路由，筛选后的路由作为 vue 的实例化参数，而不是像前一种方式所有的路由都传递进去，也不需要在全局路由守卫里做权限判断了。

缺点

• 需要做页面跳转，不是纯粹的单页应用。
• 菜单信息写死在前端，要改个显示文字或权限信息，需要重新编译。
• 菜单跟路由耦合在一起，定义路由的时候还有添加菜单显示标题，图标之类的信息，而且路由不一定作为菜单显示，还要多加字段进行标识。

③ 使用 addRoutes 动态挂载路由

addRoutes 允许在应用初始化之后，动态的挂载路由。有了这个新姿势，就不用像前一种方式那样要在应用初始化之要对路由进行筛选。

实现

应用初始化的时候先挂载不需要权限控制的路由，比如登录页，404 等错误页。

有个问题，addRoutes 应该何时调用，在哪里调用

登录后，获取用户的权限信息，然后筛选有权限访问的路由，再调用 addRoutes 添加路由。

这个方法是可行的。但是不可能每次进入应用都需要登录，用户刷新浏览器又要登陆一次。

所