乐趣区

vue router 路由鉴权(非动态路由)

概述

角色:超级管理员、主题管理员、数据服务管理员
权限:超级管理员:所有页面主题管理员:基础公共页面 + 主题设置页数据服务管理员:基础公共页面 + 数据服务设置页 + 数据服务审批页

需求:角色菜单来自后端,当用户未通过页面菜单,直接从地址栏访问非权限范围内的 url 时,拦截用户访问并重定向到首页。

实际系统中还有几种管理员,此处略去,以精简描述。
原本想用动态路由的思路去做,按权限加载对应路由表,但是由于权限可以交叉(比如一个人可以同时是主题管理员和数据服务管理员),导致权限路由表还是得去做判断组合。于是放弃了这个思路,索性就在 beforeEach 里直接判断了。
实现
路由概览
// index.js
import Vue from ‘vue’
import Router from ‘vue-router’

import LabelMarket from ‘./modules/label-market’
import PersonalCenter from ‘./modules/personal-center’
import SystemSetting from ‘./modules/system-setting’

import API from ‘@/utils/api’

Vue.use(Router)

const routes = [
{
path: ‘/label’,
component: () => import(/* webpackChunkName: “index” */ ‘@/views/index.vue’),
redirect: {name: ‘LabelMarket’},
children: [
{// 基础公共页面
path: ‘label-market’,
name: ‘LabelMarket’,
component: () => import(/* webpackChunkName: “label-market” */ ‘@/components/page-layout/OneColLayout.vue’),
redirect: {name: ‘LabelMarketIndex’},
children: LabelMarket
},
{// 个人中心
path: ‘personal-center’,
name: ‘PersonalCenter’,
redirect: ‘/label/personal-center/my-apply’,
component: () => import(/* webpackChunkName: “personal-center” */ ‘@/components/page-layout/TwoColLayout.vue’),
children: PersonalCenter
},
{// 系统设置
path: ‘system-setting’,
name: ‘SystemSetting’,
redirect: ‘/label/system-setting/theme’,
component: () => import(/* webpackChunkName: “system-setting” */ ‘@/components/page-layout/TwoColLayout.vue’),
children: SystemSetting
}]
},
{
path: ‘*’,
redirect: ‘/label’
}
]

const router = new Router({mode: ‘history’, routes})
// personal-center.js
export default [

{// 我的审批
path: ‘my-approve’,
name: ‘PersonalCenterMyApprove’,
component: () => import(/* webpackChunkName: “personal-center” */ ‘@/views/personal-center/index.vue’),
children: [
{// 数据服务审批
path: ‘api’,
name: ‘PersonalCenterMyApproveApi’,
meta: {
requireAuth: true,
authRole: ‘dataServiceAdmin’
},
component: () => import(/* webpackChunkName: “personal-center” */ ‘@/views/personal-center/api-approve/index.vue’)
},

]
}
]
export default [

{// 数据服务设置
path: ‘api’,
name: ‘SystemSettingApi’,
meta: {
requireAuth: true,
authRole: ‘dataServiceAdmin’
},
component: () => import(/* webpackChunkName: “system-setting” */ ‘@/views/system-setting/api/index.vue’)
},
{// 主题设置
path: ‘theme’,
name: ‘SystemSettingTheme’,
meta: {
requireAuth: true,
authRole: ‘topicAdmin’
},
component: () => import(/* webpackChunkName: “system-setting” */ ‘@/views/system-setting/theme/index.vue’)
},

]
鉴权判断
用户登陆信息请求后端接口,返回菜单、权限、版权信息等公共信息,存入 vuex。此处用到权限字段如下:
_userInfo: {
admin:false, // 是否超级管理员
dataServiceAdmin:true, // 是否数据服务管理员
topicAdmin:false // 是否主题管理员
}
权限判断逻辑如下:

判断当前路由是否需要鉴权(router 中 meta 字段下 requireAuth 是否为 true),让公共页面直接放行;
判断角色是超级管理员,直接放行;
(本系统特殊逻辑)判断跳转路径是主题设置但角色不为主题管理员,继续判断角色是否为数据服务管理员,跳转数据服务设置页 or 重定向(‘系统设置’菜单 ’/label/system-setting’ 默认重定向到 ’/label/system-setting/theme’,其他菜单默认重定向的都是基础公共页面,故需要对这里的重定向鉴权。系统设置的权限不是主题管理员就一定是数据服务管理员,所以能这样做);
判断路由需求权限是否符合,若不符合直接重定向。

// index.js
router.beforeEach(async (to, from, next) => {
try {
// get user login info
const _userInfo = await API.get(‘/common/query/menu’, {}, false)
router.app.$store.dispatch(‘setLoginUser’, _userInfo)

if (_userInfo && Object.keys(_userInfo).length > 0 &&
to.matched.some(record => record.meta.requireAuth)) {
if (_userInfo.admin) {// super admin can pass
next()
} else if (to.fullPath === ‘/label/system-setting/theme’ &&
!_userInfo.topicAdmin) {
if (_userInfo.dataServiceAdmin) {
next({path: ‘/label/system-setting/api’})
} else {
next({path: ‘/label’})
}
} else if (!(_userInfo[to.meta.authRole])) {
next({path: ‘/label’})
}
}
} catch (e) {
router.app.$message.error(‘ 获取用户登陆信息失败!’)
}
next()
})

退出移动版