Vue 實現前端權限控制

登陸&&權限流程圖

前言

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

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

1、登陸權限控制

登陸訪問權限控制是對用戶的校驗。在用戶登陸成功以後，後臺將返回一個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。

2、頁面權限控制

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

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

先看菜單的頁面訪問權限

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

• 方案1、初始化即掛載所有路由，每次路由跳轉前作校驗
• 方案2、只掛載當前用戶擁有的路由，若是用戶經過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>
複製代碼

3、接口訪問權限控制

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

• 先後端約定接口採用RESTful風格，一樣對應四種權限，包括查詢（get），添加（post），更新（put），刪除（delete）。對於查詢操做，正常若是參數只有一個，應該用get請求，若是有多個參數，須要改成post請求，可是須要在url後面添加/query以告訴服務端當前進行的是查詢操做，用於和正常的添加(post)請求區分。一樣的是，刪除用戶時若是有多個參數，DELETE請求一樣改成POST請求，在後面添加/delete用於和正常的刪除（delete）操做進行區分。

參考連接

• segmentfault.com/a/119000000… 《手摸手，帶你用vue擼後臺 系列二(登陸權限篇)》
• mp.weixin.qq.com/s/b-D2eH1mL… 《如何用 Vue 實現前端權限控制》