权限
实现前端权限设置,需要结合全局导航守卫和用户角色来控制路由访问权限。
确定用户角色
在登录时,根据用户信息确定用户的角色 是老师、学生等。
定义路由表
在路由表中定义所有的路由及其对应的组件,同时为每个路由配置一个 meta 属性,用来存储该路由需要的权限信息。例如:
// 首页配置路由
{
path: '/homepageManager',
component: Layout,
redirect: '/homepageManager/bannerSwiper',
alwaysShow: true, // will always show the root menu
name: 'homepageManager',
meta: {
title: '首页配置',
icon: 'lock',
roles: ['/homepageManager'] //如果未设置角色,则表示:此页面不需要权限
},
children: [
{
path: 'bannerSwiper',
component: () => import('@/views/homepageManager/bannerSwiper/index'),
name: 'bannerSwiper',
meta: {
icon: 'lock',//图标
title: '轮播图管理', //首页的标题
roles: ['/homepageManager/bannerSwiper'] //角色
}
}
]
},
定义全局导航守卫
在全局导航守卫中,监听路由的变化,根据当前用户的角色和路由的权限信息来判断是否允许访问该路由。例如:
其中,loggedIn 表示用户是否已经登录,role 表示用户的角色。如果该路由需要登录才能访问,则判断用户是否已经登录,如果未登录则跳转到登录页面;如果用户已经登录,再判断该路由需要的角色是否包含当前用户的角色,如果不包含则跳转到禁止访问页面。
router.beforeEach((to, from, next) => {
//判断本地是否有token登录
const loggedIn = localStorage.getItem('token')
//判断本地是否有role用户的角色
const role = localStorage.getItem('role')
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!loggedIn) {
// 如果未登录则跳转到登录页面
next({ name: 'Login' })
} else if (to.meta.roles && !to.meta.roles.includes(role)) {
//如果用户已经登录,再判断该路由需要的角色是否包含当前用户的角色,如果不包含则跳转到禁止访问页面。
next({ name: 'Forbidden' })
} else {
next()
}
} else {
next()
}
})
其中,loggedIn 表示用户是否已经登录,role 表示用户的角色。如果该路由需要登录才能访问,则判断用户是否已经登录,如果未登录则跳转到登录页面;如果用户已经登录,再判断该路由需要的角色是否包含当前用户的角色,如果不包含则跳转到禁止访问页面。
如果需要根据算法动态调整权限,可以在全局导航守卫中调用相应的算法,并根据算法的结果来动态修改路由表和权限信息。