vue設定權限管理

權限是對特定資源的通路許可，所謂權限控制，也就是確定使用者隻能通路到被配置設定的資源

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

頁面加載觸發

頁面上的按鈕點選觸發

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

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

路由方面，使用者登入後隻能看到自己有權通路的導航菜單，也隻能通路自己有權通路的路由位址，否則将跳轉 <code>4xx</code> 提示頁

視圖方面，使用者隻能看到自己有權浏覽的内容和有權操作的控件

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

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

接口權限

按鈕權限

菜單權限

路由權限

接口權限目前一般采用<code>jwt</code>的形式來驗證，沒有通過的話一般傳回<code>401</code>，跳轉到登入頁面重新進行登入

登入完拿到<code>token</code>，将<code>token</code>存起來，通過<code>axios</code>請求攔截器進行攔截，每次請求的時候頭部攜帶<code>token</code>

方案一

初始化即挂載全部路由，并且在路由上标記相應的權限資訊，每次路由跳轉前做校驗

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

加載所有的路由，如果路由很多，而使用者并不是所有的路由都有權限通路，對性能會有影響。

全局路由守衛裡，每次路由跳轉都要做權限判斷。

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

菜單跟路由耦合在一起，定義路由的時候還有添加菜單顯示标題，圖示之類的資訊，而且路由不一定作為菜單顯示，還要多加字段進行辨別

方案二

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

登入後，擷取使用者的權限資訊，然後篩選有權限通路的路由，在全局路由守衛裡進行調用<code>addRoutes</code>添加路由

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

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

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

菜單權限可以了解成将頁面與理由進行解耦

菜單與路由分離，菜單由後端傳回

前端定義路由資訊

<code>name</code>字段都不為空，需要根據此字段與後端傳回菜單做關聯，後端傳回的菜單資訊中必須要有<code>name</code>對應的字段，并且做唯一性校驗

全局路由守衛裡做判斷

每次路由跳轉的時候都要判斷權限，這裡的判斷也很簡單，因為菜單的<code>name</code>與路由的<code>name</code>是一一對應的，而後端傳回的菜單就已經是經過權限過濾的

如果根據路由<code>name</code>找不到對應的菜單，就表示使用者有沒權限通路

如果路由很多，可以在應用初始化的時候，隻挂載不需要權限控制的路由。取得後端傳回的菜單後，根據菜單與路由的對應關系，篩選出可通路的路由，通過<code>addRoutes</code>動态挂載

這種方式的缺點：

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

菜單和路由都由後端傳回

前端統一定義路由元件

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

在将後端傳回路由通過<code>addRoutes</code>動态挂載之間，需要将資料處理一下，将<code>component</code>字段換為真正的元件

如果有嵌套路由，後端功能設計的時候，要注意添加相應的字段，前端拿到資料也要做相應的處理

這種方法也會存在缺點：

前後端的配合要求更高

按鈕權限也可以用<code>v-if</code>判斷

但是如果頁面過多，每個頁面頁面都要擷取使用者權限<code>role</code>和路由表裡的<code>meta.btnPermissions</code>，然後再做判斷

這種方式就不展開舉例了

通過自定義指令進行按鈕權限的判斷

首先配置路由

自定義權限鑒定指令

在使用的按鈕中隻需要引用<code>v-has</code>指令

關于權限如何選擇哪種合适的方案，可以根據自己項目的方案項目，如考慮路由與菜單是否分離

權限需要前後端結合，前端盡可能的去控制，更多的需要背景判斷

真正的大師，永遠都懷着一顆學徒的心