背景:springboot+vue+shiro前后端分离项目,遭遇越权问题,后台数据可由shiro进行权限控制,但前端可以进行无权限登录账户直接输入url跳转。
目的:控制页面跳转
之前在每个路由加入了beforeEnter的路由独享守卫,根据登录用户的权限控制跳转,但遇到奇怪的问题,没有对登录路由添加导航,但登录时不时出现无法跳转的问题,没有搞清楚是怎么回事,于是改为添加meta参数,给Router设置全局前置导航守卫beforeEach,用来判断用户的权限是否符合路由的meta中roles的值。
之前的做法:
{
path: '/',
component: Layout,
meta: {
roles: ['admin'],
keepAlive: false
},
children: [
{
path: '/unitManager',
name: 'unitManager',
component: () => import('../pages/UnitManager'),
},
],
beforeEnter(to,form,next){
if (roleKey =='superAdmin'||roleKey == 'unitAdmin'){
next()
}else {
next({
path:'/'
})
}
}
},
route.js:
import Layout from '../components/Layout.vue'
const Init = () => import('../components/Init.vue')
const Login = () => import('../pages/Login.vue')
.........//以下省略
export default [
// {
// path: '*',
// redirect: '/404'
// },
{
path: '/',
redirect: '/login'
},
/**********************************初始化*******************************/
{
path: '/certificateInit',
name: 'Init',
component: Init,
meta: {
// roles:['admin']
}
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
component: Layout,
children: [
{
path: '/setting',
name: 'Setting',
component: Setting,
},
]
},
{
path: '/',
component: Layout,
children: [
{
path: '/editPassword',
name: 'editPassword',
component: editPassword,
},
]
},
/*超级管理员*/
/****************************单位账号管理****************************/
{
path: '/unitManager',
component: Layout,
children: [
{
path: '',
name: 'unitManager',
component: () => import('../pages/UnitManager'),
meta: { roles: ['unitAdmin', 'admin','superAdmin'] }
},
/****************************创建单位 ****************************/
{
path: '/unitCreate',
name: 'unitCreate',
component: resolve => require(['@/pages/UnitChild/Create'], resolve),
meta: {
roles: ['admin', 'unitAdmin','superAdmin'],
},
},
/****************************编辑单位 ****************************/
{
path: 'unitEdit',
name: 'unitEdit',
component: resolve => require(['@/pages/UnitChild/Edit'], resolve),
meta: {
roles: ['admin', 'unitAdmin','superAdmin'],
},
},
/****************************查看单位 ****************************/
{
path: '/unitDisplay',
name: 'unitDisplay',
component: resolve => require(['@/pages/UnitChild/Display'], resolve),
meta: {
roles: ['admin', 'unitAdmin','superAdmin'],
},
},
/****************************创建人员 ****************************/
{
path: '/userCreate',
name: 'userCreate',
component: resolve => require(['@/pages/User/Create'], resolve),
meta: {
roles: ['admin', 'unitAdmin','superAdmin'],
},
},
...............
...............
permission.js:
import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {Message} from 'element-ui';
NProgress.configure({ showSpinner: true }) // NProgress Configuration
router.beforeEach((to, from, next) => {
// start progress bar
NProgress.start()
//console.log(`从 ${from.path} 到${to.path}`)
let user = store.getters.userInfo;
if(to.meta && to.meta.roles && to.meta.roles.length===0){//没有权限要求
next();
}
else if (to.path === '/login') {
// if is logged in, redirect to the home page
next()
} else {
// determine whether the user has obtained his permission roles through getInfo
if(!user){//有权限要求,且没有登录
next({ path: '/login' })
} else {
//判断当前角色权限是否满足要求
if(to.meta.roles.includes(user.roleKey)){
next()
}else{//权限不满足,暂时先跳往登录页
Message.warning('权限不足');
next({name:'Login'});
}
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})