Vue3 權限路由

最近接觸到關於role 能夠查看相關頁面的功能

最初的作法是全部的路由使用動態加載，考慮到跟權限有關係，就有可能各種頁面都需要調用，因此這裡的role狀態會儲存在全局狀態管理中（pinia）

1.首先區隔出需要權限才能瀏覽的頁面，命名為dynamicRoutes

javascript">// 要有權限才能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 接受的是一个路由规则，也就是一个对象，或者接受一个字符串和一个对象。

javascript">

function addRoutes(router, userStore) {
  if ((userStore.user.role || '').toLowerCase() === 'superuser') {
    dynamicRoutes.forEach(function (route) {
      router.addRoute('main', route)
    })
  }
}
// 一載入時先調用
addRoutes(router)

然而以上的方法，顯而易見的是如果使用者的role在途中變換的話就無法去同時更新動態路由，因此第二個方法延伸～

使用RouterBefore

在路由的meta中添加哪個角色有閱覽的權利

javascript">// router.js
{     
 name: 'Member',
 path: 'member',
 meta: {
   auth: true,
   role: ['manager'],
 },
 component: () => import('pages/Member'),
}

每次跳轉路由時，都會去獲取全局的角色狀態，這裡就可以避免如果使用者中途變換角色的問題，因為每次跳轉時都會去獲取該用戶的角色，與此同時獲取將要跳轉頁面的資訊（meta: {role}）

javascript">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()
})

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