vue-element-admin是一個后臺前端解決方案，使用它可以快速進行企業(yè)后臺的搭建，今天想聊的就是如何基于這款框架實現(xiàn)我們的后臺動態(tài)權(quán)限驗證。
后端接口層，需要完成用戶的最終鑒權(quán)，也就是當(dāng)客戶端請求我們的api的時候，后臺需要在攔截器層正確判別用戶有無該接口的訪問權(quán)限，這是與前端無關(guān)的，那這里我們一般使用基于角色的訪問控制（Role-Based Access Control）。其中權(quán)限為最小單元，其組合可分配給某一角色，對于某個賬號而言，可擁有多種角色，從而實現(xiàn)后端的訪問控制。
前端界面層，需要根據(jù)后臺的配置，實現(xiàn)后臺左側(cè)路由和側(cè)邊欄的動態(tài)權(quán)限控制，所以我們還需要引入菜單層，這個菜單層在@/router/index.js這份文件里可以配置的。
這里的路由分為兩種，constantRoutes 和 asyncRoutes
constantRoutes： 代表那些不需要動態(tài)判斷權(quán)限的路由，如登錄頁、404、等通用頁面。
asyncRoutes： 代表那些需求動態(tài)判斷權(quán)限并通過 addRoutes 動態(tài)添加的頁面。
那我們關(guān)注的是：asyncRoutes。 這是需要我們通過后臺來配置，從而使得前端能夠根據(jù)后臺配置動態(tài)展示。
在index.js這份文件里，維護著前端菜單對象，每個菜單對象底下的roles控制了該路由的進入權(quán)限，這個是實現(xiàn)前端動態(tài)權(quán)限的關(guān)鍵。
由于該菜單對象里，每個菜單都可設(shè)置多種屬性，對于后臺而言，我們僅需要維護部分信息即可，最終我們可以根據(jù)關(guān)鍵信息，與前端路由進行合并，比如我們可以維護菜單的路由地址。
vue-element-admin會根據(jù)當(dāng)前用戶角色，自動為我們生成左側(cè)動態(tài)路由，我們需要做的就是：在用戶登陸層，拿到后臺維護的菜單列表與前端的菜單列表進行merge,使得在生成動態(tài)路由之前，將角色設(shè)定好。
那前面我們是從宏觀上討論了前后端的鑒權(quán)，接下來是我們的用戶登陸，在登陸層，我們使用JWT實現(xiàn)后臺用戶認(rèn)證機制，后續(xù)的請求驗證即可根據(jù)此token那進行認(rèn)證，這里并不作強求，也可以基于非對稱加密進行登陸認(rèn)證。
最后還有一些細(xì)節(jié)，如系統(tǒng)的提示層，這里我們需要在前端的響應(yīng)攔截器里根據(jù)后端返回的狀態(tài)碼進行相應(yīng)的錯誤提示，這里我們直接使用http狀態(tài)碼判斷即可，如用戶登陸過期，接口訪問受限，表單驗證錯誤，應(yīng)給予不同的提示與錯誤詳情，甚至處理方法。
更多關(guān)于vue-element-admin教程可以參考騰訊課堂視頻教程：
基于vue-element-admin的后臺權(quán)限驗證系統(tǒng)：
https://ke.qq.com/course/2993557?tuin=1be21e0f
