Vue 實現前端權限控制的示例代碼

登錄&&權限流程圖

前言

首先我們確定的權限控制分為三大部分，其中根據粒度大小分的更細：

• 登錄權限控制
• 頁面權限控制
  • 菜單中的頁面是否可以被訪問
  • 頁面中的按鈕 (增、刪、改、查)的權限控制是否顯示
• 接口權限控制

一、登錄權限控制

登錄訪問權限控制是對用戶的校驗。在用戶登錄成功之后，后臺將返回一個token，之后前端每次進行接口請求的時候，都要帶上這個token。后臺拿到這個token后進行判斷，如果此token確實存在并且沒有過期，則可以通過訪問。如果token不存在或后臺判斷已過期，則會跳轉到登錄頁面，要求用戶重新登錄獲取token。

做法一

在用戶登錄成功的回調中將后臺返回的token直接存儲到localStorage，然后同步配置請求默認參數的形式將token取出放入headers中傳給后臺。代碼如下：

  let axiosOptions = {
   method,
   url,
   data,
   timeout,
   // 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'。default json
   responseType,
   // 請求頭內追加authToken屬性
   headers: {
    authtToken: window.localStorage.getItem(`base/token$$`)
   }
  }

做法二

當前項目中使用axios.interceptors.request.use設置發送請求前的攔截,直接將token塞入req.headers.authToken中，作為全局傳入。代碼如下：

// axios.interceptors.request.use 請求攔截：配置發送請求的信息
// axios.interceptors.response.use 響應攔截：配置請求回來的信息

axios.interceptors.request.use(req => {
 req.headers.authToken = window.localStorage.getItem(`base/token$$`)
 return req
}, error => {
 return Promise.reject(error)
})

登錄涉及到的知識點

• vuex + localStorage: 本地通過vuex+localStorage持久化存儲token(token:服務端創建用于唯一標識用戶身份的Key)。
• axios: 請求攔截驗證token，可以使用axios的API:axios.interceptors.request.use，也可以通過添加默認參數的形式在請求頭中追加token。

二、頁面權限控制

上面已經說到，頁面權限控制又分為兩種：

• 菜單中的頁面是否可以被訪問
• 頁面中的按鈕 (增、刪、改、查)的權限控制是否顯示

先看菜單的頁面訪問權限

實現頁面訪問權限又可分為以下兩種方案：

• 方案一、初始化即掛載全部路由，每次路由跳轉前做校驗
• 方案二、只掛載當前用戶擁有的路由，如果用戶通過URL進行強制訪問，則會直接進入404，相當于從源頭上做了控制

前者的缺點很明顯，每次路由跳轉都要做一遍檢驗是對計算資源的浪費，另外對于用戶無權訪問的路由，理論上就不應該掛載。

后者解決了上述問題，但按需掛載路由就需要知道用戶的路由權限，也就是在用戶登錄進來的時候就要知道當前用戶擁有哪些路由權限。

所以肯定是方案二比較符合良好的用戶體驗。

項目中的菜單權限控制

1.權限涉及到的meta屬性

• noRequireAuth: true 無需權限直接掛載
• manageFree: true 不在操作權限樹中展示

2.router.beforeEach()攔截路由的鉤子

• 不需要權限的路由直接放行。meta內noRequireAuth和manageFree不受權限控制
• 進入路由前，從后端請求獲取需要展示的菜單。后端根據token判斷當前用戶權限，返回對應菜單。前端遞歸對比確定最終要顯示的菜單列表

3.router.addRoutes()

• 通過router.addRoutes()動態添加所有符合權限的路由

按鈕級權限控制(Vue指令v-permission)

1.每個模塊對應有四種權限，查詢(get)，添加(post)，更新(put)，刪除(delete)
2.利用十進制和二進制來表示當前模塊所擁有的權限。1111(15)，轉換后的二進制與權限的關系表示：從右至左數(1代表擁有該權限，0代表不擁有)，第一位代表查詢，第二位代表添加，第三位代表更新，第四位代表刪除。如eg：二進制1111(15)，代表用于查詢，添加，更新，刪除四種權限。

3.判斷對應模塊沒有此權限時，移除當前按鈕dom元素。

使用示例：

 <el-button @click="handleClick" v-permission:moduleName.post>新增</el-button>
 <el-button @click="handleClick" v-permission.delete="moduleName">刪除</el-button>

三、接口訪問權限控制

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

前后端約定接口采用RESTful風格，同樣對應四種權限，包括查詢（get），添加（post），更新（put），刪除（delete）。對于查詢操作，正常如果參數只有一個，應該用get請求，如果有多個參數，需要改為post請求，但是需要在url后面添加/query以告訴服務端當前進行的是查詢操作，用于和正常的添加(post)請求區分。同樣的是，刪除用戶時如果有多個參數，DELETE請求同樣改為POST請求，在后面添加/delete用于和正常的刪除（delete）操作進行區分。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。