我正在尝试使用基于角色的防护来保护路由,但是在执行路由时,仅对我访问的第二条路由执行验证。这一次又一次地发生,这似乎是子路径的问题,只有在子路径访问的第二条路径中执行验证。我附上我的代码
router.beforeEach((to,from, next)=>{
const rolesToPath = (to.meta.roles)?to.meta.roles:null //roles authorized in next path
const reqAuth = to.matched.some(record=> record.meta.auth)
const currentUser = store.state.currentUser //current user With Roles
const homeRoute = '/dashboard'
const loginRoute = '/login'
if (reqAuth && currentUser) {
let auth = matchRoles(rolesToPath,currentUser.roles)
if (auth) {
next()
} else {
next(homeRoute)
}
}
function matchRoles(x,y){ //this function resolve if user is authorized
// to next path
let flag = false
x.forEach((x)=>{
y.forEach((y)=>{
if (x.userRol==y.name) {
flag = true//if role user is on next path
}
})
})
if (flag) return true
return false
}
})
这些是我要应用验证的路径
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
mode: 'history', // https://router.vuejs.org/api/#mode
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes:[
{
path: '/login',
name: 'Login',
component: Login,
meta : {
auth: false,
},
},
{
path: '/register',
name: 'Register',
component: Register,
meta : {
auth: false,
},
},
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: DefaultContainer,
meta : {
auth: false,
},
children: [
{
path : 'credenciales',
redirect : '/credenciales/proveedores',
name : 'Credenciales',
component : {
render (c) { return c('router-view') }
},
children: [
{
path : 'proveedores',
name : 'Proveedores',
component : TablaProveedores,
meta : {
auth: true,
roles: [
{
userRol : 'tester',
lock : true,
}
]
},
},
{
path : 'accesos',
name : 'Accesos',
component : TablaProveedores,
meta : {
auth: true,
roles: [
{
userRol : 'admin',
lock : true,
}
]
},
},
]
},
]
})