引言

做後臺系統的時候，難免會有使用者許可權的判斷。admin可以檢視全部選單，user只能檢視部分選單。

一開始接觸這個需求的時候，完全是純前端做的。在配置路由的時候，加一個roles的屬性，通過判斷使用者的roles是否與路由的roles屬性相匹配來作為顯示隱藏的依據

{
 path: '/router',name: 'router',meta: {
 title: '標題',roles: ['admin','user']
 },component: index,children: [
 {
 path: 'children',name: 'children',meta: {
 title: '子標題',component: child
 }
 ]
}

// 過濾路由 menuList-選單 roles-使用者角色
const checkMenuList = (menuList,roles) => {
 for (let i = 0; i < menuList.length; i++) {
 if (!compareEqual(roles,menuList[i].meta.roles) || menuList[i].meta.noRenderTree) {
 menuList.splice(i,1)
 i -= 1
 } else {
 if (menuList[i].children) {
 checkMenuList(menuList[i].children,roles)
 }
 }
 }
 return menuList
}

這樣做確實可以實現給不同使用者展示不同的選單。但是如果使用者許可權發生改變，前端就需要發版。本著萬物皆可靈活配置的原則。

需求

首先我們要了解，我們要做什麼。

我們希望我們可以通過使用者許可權配置功能，達到靈活配置路由許可權，由伺服器端返回需要展示的路由許可權，前端做展示。

思路

• 前端配置好專案全部頁面的路由
• 伺服器端返回該使用者的許可權列表，前端去匹配，最後返回一個路由列表，作為選單
• 為了更好的使用者體驗，當用戶輸入異常的路由時，我們要重定向到一個404頁面，提示使用者該頁面不存在。
• 基於第3點，我們在每次跳轉的時候，還需要判斷這個頁面是否存在，該使用者是否有許可權進行跳轉

實現

ok 思路整理完了。現在就開始來實現吧！

首先，routers是需要在前端註冊，我們要先配置整個頁面的routers。

除了系統的選單之外，我們還需要配置403錯誤頁面，還有login、首頁這些基本路由。由於系統選單還需要與伺服器端返回的路由列表進行匹配，暫時不進行註冊

// router.js

 // 基本路由
export const defaultRouter = [
 { path: '/',component: index },// 首頁
 { path: '/login',name: 'login',component: login } // 登入頁
 ]
 
 // 專案全部頁面
export const appRouter = [
 {
 path: '/router1',name: 'router1',redirect: '/router1/test1',component: router1,meta: { title: '路由1'},children: [
 { path: 'test1',name: 'test1',component: test1,meta: { title: '測試1' } },{ path: 'test2',name: 'test2',meta: { title: '測試2' } }
 ]
 },]
 // 這個是我們頁面初始化時候，註冊的routes
const routers = [ 
 ...defaultRouter
]
const RouterConfig = {
 routes: routers
}
const router = new VueRouter(RouterConfig)

全部路由都註冊完了，接下來就要匹配使用者可訪問的路由了，這一步需要和伺服器端一起約定規則。

// 伺服器端返回的鍵值對： 路由名：是否有許可權
authRouter:{
 'test1': false,'test2': true
}

拿到伺服器端返回的使用者許可權之後，就開始過濾路由

// 過濾路由 appRouterCopy-專案全部頁面 authRouter-許可權列表
const checkMenuList = (appRouterCopy,authRouter) => {
 for (let i = 0; i < appRouterCopy.length; i++) {
 let {name,children} = appRouterCopy[i]
 if (authRouter[name] === false) {
  appRouterCopy.splice(i,1)
  i--
 } else if (children && children.length) {
  checkMenuList(children,authRouter)
 }
 }
}

得到過濾後的路由之後，使用addRoutes進行註冊。注意404路由配置要在最後加上。

let error404Page = { path: '/*',name: 'error-404',meta: 
{ 
title: '404-頁面不存在'},component: error404Page
}
router.addRoutes([...appRouterCopy,error404Page])

到此我們就得到了使用者有許可權的頁面了，可以把得到的列表作為系統選單渲染上去。接下來就要處理一下跳轉異常的狀況了。需要用到beforeEach對每次跳轉進行攔截判斷

router.beforeEach(((to,from,next) => {
 if (isNotLog && to.name !== 'login') {
 // 未登入 跳轉到登入頁
  next({ name: 'login' })
 } else if (to.name && (to.name === 'login' || to.name.indexOf('error') !== -1)){
 // 跳轉異常
 next()
 } else {
 // 校驗使用者許可權
 checkUser(next,to,router)
 }
})

const checkUser = async (next,router) => {
 if (isNotUser) {
 // 首次登陸系統，沒有使用者資訊的時候 需要獲取使用者資訊做過濾路由的操作
 const authRouter = getAuthRouter() // 獲取使用者許可權
 checkMenuList(appRouterCopy,authRouter)
 const error404Page = { path: '/*',meta: { title: '404-頁面不存在'},component: error404Page}
 router.addRoutes([...appRouterCopy,error404Page])
 if (!appRouterCopy.length) {
  // 使用者沒有有許可權的路由 可以跳轉到404或者登入頁
  next({ ...error404Page,replace: true })
 } else {
  next({ ...to,replace: true })
 }
 } else {
 next()
 }
}

總結

到此這篇關於vue路由許可權校驗功能的實現程式碼的文章就介紹到這了,更多相關vue路由許可權校驗內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！