vue-element-admin教程之實現先後端動態權限

vue-element-admin是一個後臺前端解決方案，使用它能夠快速進行企業後臺的搭建，今天想聊的就是如何基於這款框架實現咱們的後臺動態權限驗證。

後端接口層，須要完成用戶的最終鑑權，也就是當客戶端請求咱們的api的時候，後臺須要在攔截器層正確判別用戶有無該接口的訪問權限，這是與前端無關的，那這裏咱們通常使用基於角色發的訪問控制（Role-Based Access Control），簡稱RBAC。其中權限爲最小單元，其組合可分配給某一角色，對於某個帳號而言，可擁有多種角色，從而實現後端的訪問控制。

前端界面層，須要根據後臺的配置，實現後臺左側路由和側邊欄的動態權限控制，因此咱們還須要引入菜單層，這個菜單層在@/router/index.js這份文件裏能夠配置的。

這裏的路由分爲兩種，constantRoutes 和 asyncRoutes

constantRoutes： 表明那些不須要動態判斷權限的路由，如登陸頁、40四、等通用頁面。

asyncRoutes： 表明那些需求動態判斷權限並經過 addRoutes 動態添加的頁面。

那咱們關注的是：asyncRoutes。   這是須要咱們經過後臺來配置，從而使得前端可以根據後臺配置動態展現。

在index.js這份文件裏，維護着前端菜單對象，每一個菜單對象底下的roles控制了該路由的進入權限，這個是實現前端動態權限的關鍵。

因爲該菜單對象裏，每一個菜單均可設置多種屬性，對於後臺而言，咱們僅須要維護部分信息便可，最終咱們能夠根據關鍵信息，與前端路由進行合併，好比咱們能夠維護菜單的路由地址。

vue-element-admin會根據當前用戶角色，自動爲咱們生成左側動態路由，咱們須要作的就是：在用戶登錄層，拿到後臺維護的菜單列表與前端的菜單列表進行merge,使得在生成動態路由以前，將角色設定好。

那前面咱們是從宏觀上討論了先後端的鑑權，接下來是咱們的用戶登錄，在登錄層，咱們使用JWT實現後臺用戶認證機制，後續的請求驗證便可根據此token那進行認證，這裏並不做強求，也能夠基於非對稱加密進行登錄認證。

最後還有一些細節，如系統的提示層，這裏咱們須要在前端的響應攔截器里根據後端返回的狀態碼進行相應的錯誤提示，這裏咱們直接使用http狀態碼判斷便可，如用戶登錄過時，接口訪問受限，表單驗證錯誤，應給予不一樣的提示與錯誤詳情，甚至處理方法。

更多關於vue-element-admin教程能夠參考騰訊課堂視頻教程

基於vue-element-admin的後臺權限驗證系統：

https://ke.qq.com/course/2796167?tuin=1be21e0f

​

**