最近接觸到關於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.roleconst userRole = (userStore.user.role || '').toLowerCase()if (roles && !roles.includes(userRole)) {next('/404')return}next()
})

以上就是路由權限的功能～