2021.08.11 动态路由 && 配置路由权限 【route】

在项目中我们常会需要根据 用户的角色不同 来渲染 不同的路由。

方法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属性里添加标识以确定是否需要鉴权，然后过滤

 [
  {
    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
    }
  }
]

const routes = [].filter(item => !item.meta.auth)

方法3. 直接后台取路由数组，调整好参数之后，拼接给路由

Router.addRoutes([...routes]) // 官方推荐的添加路由api

本文参考 https://www.cnblogs.com/zhuhuoxingguang/p/11759001.html