vue中 根据权限 动态的设置路由

本篇文章主要讲的是使用vue的框架 vue-element-admin, 来解决根据不同的角色权限, 显示不同的路由.

 ⽅式⼀，后台返回⾓⾊树形路由表，前端添加动态路由

 ⽅式⼆，后台返回⽤户⾓⾊，前端在路由表⾥添加⾓⾊路由权限

下面详细的来讲一下,这两种方法:

 动态路由⽅式⼀

      后台返回⾓⾊树形路由表，前端添加动态路由。登录获 取到⽤户的信息之后，通过⽤户⾓⾊访问后台接⼝获取动态路由，依赖后台接⼝返回路由表

      后台数据样例如下:

    

const serviceMap = [
 // 登录界⾯
 {
 path: '/login',
 // 这⾥后台返回的是component: 'login',前端需要处理成以下代码
 component: map['login'],
 hidden: true
 },
 // ⾸⻚
 {
 path: '/',
 component: Layout,
 redirect: '/dashboard',
 children: [{
 path: 'dashboard',
 name: 'Dashboard',
 component: map['dashboard'],
 meta: { title: '⾸⻚', icon: 'dashboard' }
 }]
 },
 {

 path: '/customer',
 component: Layout,
 children: [
 {
 path: 'list',
 name: 'customer',
 // 这⾥后台返回的是component: 'customer',前端需要处理成以下代码
 component: map['customer'],
 meta: {
 roles: ['customer'],
 title: '顾客管理',
 icon: 'peo'
 }
 }
 ]
 },
 // 产品管理
 {
 path: '/product',
 component: Layout,
 children: [
 {
 path: 'list',
 name: 'product',
 component: map['product'],
 meta: { title: '产品管理', icon: 'table' }
 }
 ]
 },
 // 审核
 {
 path: '/examine',
 component: Layout,
 meta: { title: '审核⼤厅', icon: 'tree' },
 children: [
 {
 path: 'waiterExamine',
 component: map['waiterExamine'],
 meta: { title: '员⼯审核' }
 },
 {
 path: 'cashExamine',
 component: map['cashExamine'],
 meta: { title: '提现审核' }
 },
 ]
 },
 // 404报错提示⻚⾯
 {
 path: '/404',
 component: map['error'],
 hidden: true
 },

 { path: '*', redirect: '/404', hidden: true }
]

前端最终将路由表动态添加到路由中，下⽅的router对象是引⼊的

import router from '@/router/index';
router.options.routes = serviceMap;
router.addRoutes(serviceMap);

动态路由⽅式⼆

     后台返回⽤户⾓⾊，前端在路由表⾥添加⾓⾊路由权限

     需要操作的文件有:

                                 

1. src/router/index.js
2. src/store/modules/user.js
3. src/store/getters.js
4. src/permission.js
5. src/store/modules/permission.js

1. 操作src/router/index.js

     在该⽂件内内置两组路由，⼀组是基本路由constantRoutes，⼀组是需要权限控制的路由asyncRoutes， 将来在权限控制的路由组内过滤出对应的路由表，在需要权限控制的路由内添加如下代表权限的代码 meta: { roles: ['教师'] }

export const constantRoutes = [
// 登录界⾯
{
 path: '/login',
 component: () => import('@/views/login/index'),
 hidden: true
},
// ⾸⻚
{
 path: '/',
 component: Layout,
 redirect: '/dashboard',
 children: [{
 path: 'dashboard',
 name: 'Dashboard',
 component: () => import('@/views/dashboard/index'),
 meta: { title: '⾸⻚', icon: 'dashboard' }
 }]
},
// 404报错提示⻚⾯
{

 path: '/404',
 component: () => import('@/views/404'),
 hidden: true
},
{ path: '*', redirect: '/404', hidden: true }
];
// 需要动态处理的路由
export const asyncRoutes = [
// 顾客管理
{
 path: '/customer',
 component: Layout,
 meta: { roles: ['教师'] },
 children: [
 {
 path: 'list',
 name: 'customer',
 component: () => import('@/views/customer/index'),
 meta: {
 roles: ['教师'],
 title: '顾客管理',
 icon: 'peo'
 }
 }
 ]
},
// 审核
{
 path: '/examine',
 component: Layout,
 meta: { roles: ['审核管理员'], title: '审核⼤厅', icon: 'tree' },
 children: [
 {
 path: 'waiterExamine',
 component: () => import('@/views/examine/waiterExamine'),
 meta: { title: '员⼯审核' }
 },
 {
 path: 'cashExamine',
 component: () => import('@/views/examine/cashExamine'),
 meta: { title: '提现审核' }
 },
 ]
},
]

基本路由constantRoutes注册到路由器对象内

const createRouter = () => new Router({
 // mode: 'history', // require service support
 scrollBehavior: () => ({ y: 0 }),
 routes: constantRoutes
 })

2. 操作src/store/modules/user.js

   在state中添加roles状态

   

roles: []

   在mutations⾥添加SET_ROLES突变

 SET_ROLES: (state, roles) => {
 state.roles = roles
 }

在actions的getInfo添加如下代码，根据获取到的后台数据中的roles⽣成roles['管理员','教师']这种格式的 ⾓⾊信息，然后调⽤突变

getInfo({ commit, state }) {
 return new Promise((resolve, reject) => {
 getInfo(state.token).then(response => {
 const { data } = response
 let roles = data.roles.map(item => item.name)
 // 在src/permission.js中会⽤到这个仓库的roles数据
 commit('SET_ROLES', roles);
 data.roles = roles;
 // 在src/permission.js中会⽤到data中的roles数据
 resolve(data);
 }).catch(error => {
 reject(error)
 })
 })
},

3. 操作src/store/getters.js

      在getters内添加如下代码，将user仓库的roles状态直接暴露到getters中，⽅便src/permission.js中使⽤

roles: state => state.user.roles

4. 操作src/permission.js

    引⼊路由⽂件中的基础路由，等过滤出合适的路由后合并基础路由，设置为路由表。

    

import { constantRoutes } from '@/router'

该⽂件31⾏上下，添加如下代码，部分代码内部已经有

   

//如下代码就是在使⽤仓库中的roles数据，查看学习即可，不⽤动
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if (hasRoles) {
 next()
} else {
 try {
 //如下代码在获取user仓库中的getInfo动作的resolve的data中的roles数据
 const { roles } = await store.dispatch('user/getInfo')
 //如下代码在分发permission仓库的generateRoutes动作，该动作功能是根据当前的⻆⾊从
router.js的权限路由中过滤出符合当前⻆⾊的路由数组。accessRoutes⽬前就是符合权限的路由
表数组
 const accessRoutes = await store.dispatch('permission/generateRoutes',
roles)
 // 路由表⽴即⽣效，constantRoutes.concat(accessRoutes)是进⾏路由的合并
 router.options.routes = constantRoutes.concat(accessRoutes);
 // 添加路由到路由表中
 router.addRoutes(constantRoutes.concat(accessRoutes))
 next({ ...to, replace: true })
 } catch (error) {
 await store.dispatch('user/resetToken')
 Message.error(error || 'Has Error')
 next(`/login?redirect=${to.path}`)
 NProgress.done()
 }
}

5. 操作src/store/modules/permission.js

    src/permission.js中分发了permission仓库中的generateRoutes。在permission仓库中的generateRoutes动作代 码如下：

generateRoutes({ commit }, roles) {
 return new Promise(resolve => {
 let accessedRoutes = [];
 if (roles.includes('管理员')) {
 // 代表如果是管理员⻆⾊，那么有所有的⻆⾊权限，管理员这⼏个字要与router.js的

roles的取值⼀致
 accessedRoutes = asyncRoutes || []
 } else {
 // 如果不是管理员⻆⾊，那么根据对应的⻆⾊过滤权限
 accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
 }
 commit('SET_ROUTES', accessedRoutes)
 resolve(accessedRoutes)
 })
}

 

以上就是全部内容啦,希望对您有所帮助哈,有什么问题欢迎指正和讨论哦~