最近接觸到關於role 能夠查看相關頁面的功能
最初的作法是全部的路由使用動態加載,考慮到 跟權限有關係 ,就有可能各種頁面都需要調用,因此這裡的role狀態會儲存在全局狀態管理中(pinia)
1.首先區隔出需要權限才能瀏覽的頁面,命名為dynamicRoutes
// 要有權限才能access的路由
export const dynamicRoutes = [
{
name: 'NotificationManagement',
path: 'notification',
component: () => import('pages/NotificationManagement'),
},
{
name: 'MemberManagement',
path: 'member',
component: () => import('pages/MemberManagement'),
},
]
在首次加載時先判斷動態路由,如果為superuser則加入動態的路由
新版本router.addRoutes已废弃:使用 router.addRoute() 代替。
官方的解释是 router.addRoute 接受的是一个路由规则,也就是一个对象,或者接受一个字符串和一个对象。
function addRoutes(router, userStore) {
if ((userStore.user.role || '').toLowerCase() === 'superuser') {
dynamicRoutes.forEach(function (route) {
router.addRoute('main', route)
})
}
}
// 一載入時先調用
addRoutes(router)
然而以上的方法,顯而易見的是如果使用者的role在途中變換的話就無法去同時更新動態路由,因此第二個方法延伸~
使用RouterBefore
在路由的meta中添加哪個角色有閱覽的權利
// router.js
{
name: 'Member',
path: 'member',
meta: {
auth: true,
role: ['manager'],
},
component: () => import('pages/Member'),
}
每次跳轉路由時,都會去獲取全局的角色狀態,這裡就可以避免如果使用者中途變換角色的問題,因為每次跳轉時都會去獲取該用戶的角色,與此同時獲取將要跳轉頁面的資訊(meta: {role})
router.beforeEach((to, from, next) => {
const roles = to.meta.role
const userRole = (userStore.user.role || '').toLowerCase()
if (roles && !roles.includes(userRole)) {
next('/404')
return
}
next()
})
以上就是路由權限的功能~