別眨眼網

一、是什麼

許可權是對特定資源的訪問許可，所謂許可權控制，也就是確保使用者只能訪問到被分配的資源

而前端許可權歸根結底是請求的發起權，請求的發起可能有下面兩種形式觸發

頁面載入觸發

頁面上的按鈕點選觸發

總的來說，所有的請求發起都觸發自前端路由或檢視

所以我們可以從這兩方面入手，對觸發許可權的源頭進行控制，最終要實現的目標是：

路由方面，使用者登入後只能看到自己有權訪問的導航選單，也只能訪問自己有權訪問的路由地址，否則將跳轉

4xx

提示頁

檢視方面，使用者只能看到自己有權瀏覽的內容和有權操作的控制元件

最後再加上請求控制作為最後一道防線，路由可能配置失誤，按鈕可能忘了加許可權，這種時候請求控制可以用來兜底，越權請求將在前端被攔截

二、如何做

前端許可權控制可以分為四個方面：

介面許可權

按鈕許可權

選單許可權

路由許可權

介面許可權

介面許可權目前一般採用

jwt

的形式來驗證，沒有透過的話一般返回

401

，跳轉到登入頁面重新進行登入

登入完拿到

token

，將

token

存起來，透過

axios

請求攔截器進行攔截，每次請求的時候頭部攜帶

token

axios。interceptors。request。use（config => { config。headers［‘token’］ = cookie。get（‘token’） return config}）axios。interceptors。response。use（res=>{}，{response}=>{ if （response。data。code === 40099 || response。data。code === 40098） { //token過期或者錯誤 router。push（‘/login’） }}）

路由許可權控制

方案一

初始化即掛載全部路由，並且在路由上標記相應的許可權資訊，每次路由跳轉前做校驗

const routerMap = ［ { path： ‘/permission’， component： Layout， redirect： ‘/permission/index’， alwaysShow： true， // will always show the root menu meta： { title： ‘permission’， icon： ‘lock’， roles： ［‘admin’， ‘editor’］ // you can set roles in root nav }， children： ［{ path： ‘page’， component： （） => import（‘@/views/permission/page’）， name： ‘pagePermission’， meta： { title： ‘pagePermission’， roles： ［‘admin’］ // or you can only set roles in sub nav } }， { path： ‘directive’， component： （） => import（‘@/views/permission/directive’）， name： ‘directivePermission’， meta： { title： ‘directivePermission’ // if do not set roles， means： this page does not require permission } }］ }］

這種方式存在以下四種缺點：

載入所有的路由，如果路由很多，而使用者並不是所有的路由都有許可權訪問，對效能會有影響。

全域性路由守衛裡，每次路由跳轉都要做許可權判斷。

選單資訊寫死在前端，要改個顯示文字或許可權資訊，需要重新編譯

選單跟路由耦合在一起，定義路由的時候還有新增選單顯示標題，圖示之類的資訊，而且路由不一定作為選單顯示，還要多加欄位進行標識

方案二

初始化的時候先掛載不需要許可權控制的路由，比如登入頁，404等錯誤頁。如果使用者透過URL進行強制訪問，則會直接進入404，相當於從源頭上做了控制

登入後，獲取使用者的許可權資訊，然後篩選有許可權訪問的路由，在全域性路由守衛裡進行呼叫

addRoutes

新增路由

import router from ‘。/router’import store from ‘。/store’import { Message } from ‘element-ui’import NProgress from ‘nprogress’ // progress barimport ‘nprogress/nprogress。css’// progress bar styleimport { getToken } from ‘@/utils/auth’ // getToken from cookieNProgress。configure（{ showSpinner： false }）// NProgress Configuration// permission judge functionfunction hasPermission（roles， permissionRoles） { if （roles。indexOf（‘admin’） >= 0） return true // admin permission passed directly if （！permissionRoles） return true return roles。some（role => permissionRoles。indexOf（role） >= 0）}const whiteList = ［‘/login’， ‘/authredirect’］// no redirect whitelistrouter。beforeEach（（to， from， next） => { NProgress。start（） // start progress bar if （getToken（）） { // determine if there has token /* has token*/ if （to。path === ‘/login’） { next（{ path： ‘/’ }） NProgress。done（） // if current page is dashboard will not trigger afterEach hook， so manually handle it } else { if （store。getters。roles。length === 0） { // 判斷當前使用者是否已拉取完user_info資訊 store。dispatch（‘GetUserInfo’）。then（res => { // 拉取user_info const roles = res。data。roles // note： roles must be a array！ such as： ［‘editor’，‘develop’］ store。dispatch（‘GenerateRoutes’， { roles }）。then（（） => { // 根據roles許可權生成可訪問的路由表 router。addRoutes（store。getters。addRouters） // 動態新增可訪問路由表 next（{ 。。。to， replace： true }） // hack方法 確保addRoutes已完成 ，set the replace： true so the navigation will not leave a history record }） }）。catch（（err） => { store。dispatch（‘FedLogOut’）。then（（） => { Message。error（err || ‘Verification failed， please login again’） next（{ path： ‘/’ }） }） }） } else { // 沒有動態改變許可權的需求可直接next（） 刪除下方許可權判斷 ↓ if （hasPermission（store。getters。roles， to。meta。roles）） { next（）// } else { next（{ path： ‘/401’， replace： true， query： { noGoBack： true }}） } // 可刪 ↑ } } } else { /* has no token*/ if （whiteList。indexOf（to。path） ！== -1） { // 在免登入白名單，直接進入 next（） } else { next（‘/login’） // 否則全部重定向到登入頁 NProgress。done（） // if current page is login will not trigger afterEach hook， so manually handle it } }}）router。afterEach（（） => { NProgress。done（） // finish progress bar}）

按需掛載，路由就需要知道使用者的路由許可權，也就是在使用者登入進來的時候就要知道當前使用者擁有哪些路由許可權

這種方式也存在了以下的缺點：

全域性路由守衛裡，每次路由跳轉都要做出判斷

選單資訊寫死在前端，要改個顯示文字或許可權資訊，需要重新編譯

選單跟路由耦合在一起，定義路由的時候還有新增選單顯示標題，圖示之類的資訊，而且路由不一定作為選單顯示，還要多加欄位進行標識

選單許可權

選單許可權可以理解成將頁面與理由進行解耦

方案一

選單與路由分離，選單由後端返回

前端定義路由資訊

{ name： “login”， path： “/login”， component： （） => import（“@/pages/Login。vue”）}

name

欄位都不為空，需要根據此欄位與後端返回選單做關聯，後端返回的選單資訊中必須要有

name

對應的欄位，並且做唯一性校驗

全域性路由守衛裡做判斷

function hasPermission（router， accessMenu） { if （whiteList。indexOf（router。path） ！== -1） { return true； } let menu = Util。getMenuByName（router。name， accessMenu）； if （menu。name） { return true； } return false；}Router。beforeEach（async （to， from， next） => { if （getToken（）） { let userInfo = store。state。user。userInfo； if （！userInfo。name） { try { await store。dispatch（“GetUserInfo”） await store。dispatch（‘updateAccessMenu’） if （to。path === ‘/login’） { next（{ name： ‘home_index’ }） } else { //Util。toDefaultPage（［。。。routers］， to。name， router， next）； next（{ 。。。to， replace： true }）//選單許可權更新完成，重新進一次當前路由 } } catch （e） { if （whiteList。indexOf（to。path） ！== -1） { // 在免登入白名單，直接進入 next（） } else { next（‘/login’） } } } else { if （to。path === ‘/login’） { next（{ name： ‘home_index’ }） } else { if （hasPermission（to， store。getters。accessMenu）） { Util。toDefaultPage（store。getters。accessMenu，to， routes， next）； } else { next（{ path： ‘/403’，replace：true }） } } } } else { if （whiteList。indexOf（to。path） ！== -1） { // 在免登入白名單，直接進入 next（） } else { next（‘/login’） } } let menu = Util。getMenuByName（to。name， store。getters。accessMenu）； Util。title（menu。title）；}）；Router。afterEach（（to） => { window。scrollTo（0， 0）；}）；

每次路由跳轉的時候都要判斷許可權，這裡的判斷也很簡單，因為選單的

name

與路由的

name

是一一對應的，而後端返回的選單就已經是經過許可權過濾的

如果根據路由

name

找不到對應的選單，就表示使用者有許可權訪問

如果路由很多，可以在應用初始化的時候，只掛載不需要許可權控制的路由。取得後端返回的選單後，根據選單與路由的對應關係，篩選出可訪問的路由，透過

addRoutes

動態掛載

這種方式的缺點：

選單需要與路由做一一對應，前端添加了新功能，需要透過選單管理功能新增新的選單，如果選單配置的不對會導致應用不能正常使用

全域性路由守衛裡，每次路由跳轉都要做出判斷

方案二

選單和路由都由後端返回

前端統一定義路由元件

const Home = （） => import（“。。/pages/Home。vue”）；const UserInfo = （） => import（“。。/pages/UserInfo。vue”）；export default { home： Home， userInfo： UserInfo}；

後端路由元件返回以下格式

［ { name： “home”， path： “/”， component： “home” }， { name： “home”， path： “/userinfo”， component： “userInfo” }］

在將後端返回路由透過

addRoutes

動態掛載之間，需要將資料處理一下，將

component

欄位換為真正的元件

如果有巢狀路由，後端功能設計的時候，要注意新增相應的欄位，前端拿到的資料也要做相應的處理

這種方法也存在缺點：

全域性路由守衛裡，每次路由跳轉都要做出判斷

前後端的配合要求更高

按鈕許可權

方案一

按鈕許可權也可以用

v-if

判斷

但是如果頁面過多，每個頁面頁面都要獲取使用者許可權

role

和路由表裡的

meta。btnPermissions

，然後再做判斷

這種方式就不展開舉例了

方案二

透過自定義指令進行按鈕許可權的判斷

首先配置路由

{ path： ‘/permission’， component： Layout， name： ‘許可權測試’， meta： { btnPermissions： ［‘admin’， ‘supper’， ‘normal’］ }， //頁面需要的許可權 children： ［{ path： ‘supper’， component： _import（‘system/supper’）， name： ‘許可權測試頁’， meta： { btnPermissions： ［‘admin’， ‘supper’］ } //頁面需要的許可權 }， { path： ‘normal’， component： _import（‘system/normal’）， name： ‘許可權測試頁’， meta： { btnPermissions： ［‘admin’］ } //頁面需要的許可權 }］}

自定義許可權鑑定指令

import Vue from ‘vue’/**許可權指令**/const has = Vue。directive（‘has’， { bind： function （el， binding， vnode） { // 獲取頁面按鈕許可權 let btnPermissionsArr = ［］； if（binding。value）{ // 如果指令傳值，獲取指令引數，根據指令引數和當前登入人按鈕許可權做比較。 btnPermissionsArr = Array。of（binding。value）； }else{ // 否則獲取路由中的引數，根據路由的btnPermissionsArr和當前登入人按鈕許可權做比較。 btnPermissionsArr = vnode。context。$route。meta。btnPermissions； } if （！Vue。prototype。$_has（btnPermissionsArr）） { el。parentNode。removeChild（el）； } }}）；// 許可權檢查方法Vue。prototype。$_has = function （value） { let isExist = false； // 獲取使用者按鈕許可權 let btnPermissionsStr = sessionStorage。getItem（“btnPermissions”）； if （btnPermissionsStr == undefined || btnPermissionsStr == null） { return false； } if （value。indexOf（btnPermissionsStr） > -1） { isExist = true； } return isExist；}；export {has}

在使用的按鈕中只需要引用

v-has

指令

編輯

小結

關於許可權如何選擇哪種合適的方案，可以根據自己專案的方案專案，如考慮路由與選單是否分離

許可權需要前後端結合，前端儘可能的去控制，更多的需要後臺判斷

其它程式碼展示

路由攔截和白名單

const whiteList = ［‘/login’， ‘/auth-redirect’， ‘/bind’， ‘/register’］router。beforeEach（（to， from， next） => { NProgress。start（） if （getToken（）） { to。meta。title && store。dispatch（‘settings/setTitle’， to。meta。title） /* has token*/ if （to。path === ‘/login’） { next（{ path： ‘/’ }） NProgress。done（） } else { if （store。getters。roles。length === 0） { // 判斷當前使用者是否已拉取完user_info資訊 store。dispatch（‘GetInfo’）。then（（） => { store。dispatch（‘GenerateRoutes’）。then（accessRoutes => { // 根據roles許可權生成可訪問的路由表 router。addRoutes（accessRoutes） // 動態新增可訪問路由表 next（{ 。。。to， replace： true }） // hack方法 確保addRoutes已完成 }） }）。catch（err => { store。dispatch（‘LogOut’）。then（（） => { Message。error（err） next（{ path： ‘/’ }） }） }） } else { next（） } } } else { // 沒有token if （whiteList。indexOf（to。path） ！== -1） { // 在免登入白名單，直接進入 next（） } else { next（`/login？redirect=${to。fullPath}`） // 否則全部重定向到登入頁 NProgress。done（） } }}）router。afterEach（（） => { NProgress。done（）}）

操作許可權

/** * v-hasPermi 操作許可權處理 * Copyright （c） 2019 ruoyi */ import store from ‘@/store’export default { inserted（el， binding， vnode） { const { value } = binding const all_permission = “*：*：*”； const permissions = store。getters && store。getters。permissions if （value && value instanceof Array && value。length > 0） { const permissionFlag = value const hasPermissions = permissions。some（permission => { return all_permission === permission || permissionFlag。includes（permission） }） if （！hasPermissions） { el。parentNode && el。parentNode。removeChild（el） } } else { throw new Error（`請設定操作許可權標籤值`） } }}

角色許可權

/** * v-hasRole 角色許可權處理 * Copyright （c） 2019 ruoyi */ import store from ‘@/store’export default { inserted（el， binding， vnode） { const { value } = binding const super_admin = “admin”； const roles = store。getters && store。getters。roles if （value && value instanceof Array && value。length > 0） { const roleFlag = value const hasRole = roles。some（role => { return super_admin === role || roleFlag。includes（role） }） if （！hasRole） { el。parentNode && el。parentNode。removeChild（el） } } else { throw new Error（`請設定角色許可權標籤值“`） } }}

相關校驗

import store from ‘@/store’/** * 字元許可權校驗 * @param {Array} value 校驗值 * @returns {Boolean} */export function checkPermi（value） { if （value && value instanceof Array && value。length > 0） { const permissions = store。getters && store。getters。permissions const permissionDatas = value const all_permission = ”*：*：*“； const hasPermission = permissions。some（permission => { return all_permission === permission || permissionDatas。includes（permission） }） if （！hasPermission） { return false } return true } else { console。error（`need roles！ Like checkPermi=”［‘system：user：add’，‘system：user：edit’］“`） return false }}/** * 角色許可權校驗 * @param {Array} value 校驗值 * @returns {Boolean} */export function checkRole（value） { if （value && value instanceof Array && value。length > 0） { const roles = store。getters && store。getters。roles const permissionRoles = value const super_admin = ”admin“； const hasRole = roles。some（role => { return super_admin === role || permissionRoles。includes（role） }） if （！hasRole） { return false } return true } else { console。error（`need roles！ Like checkRole=”［‘admin’，‘editor’］“`） return false }}

給大家分享我收集整理的各種學習資料，前端小白交流、學習交流，也可以直接問我，我會組織大家一起做專案練習，幫助大家匹配一位學習夥伴互相監督學習-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎