Vue-Access-Control是一套基于Vue/Vue-Router/axios 實現的前端用戶權限控制解決方案，通過對路由、視圖、請求三個層面的控制，使開發者可以實現任意顆粒度的用戶權限控制。

安裝

版本要求

Vue 2.0x
Vue-router 3.x
獲取

git：git clone https://github.com/tower1229/Vue-Access-Control.git

npm：npm i vue-access-control

運行

//開發npm run dev//構建npm build

概述

整體思路

會話開始之初，先初始化一個只有登錄路由的Vue實例，在根組件created鉤子里將路由定向到登錄頁，用戶登錄成功后前端拿到用戶token，設置axios實例統一為請求headers添加{"Authorization":token}實現用戶鑒權，然后獲取當前用戶的權限數據，主要包括路由權限和資源權限，之后動態添加路由，生成菜單，實現權限指令和全局權限驗證方法，并為axios實例添加請求攔截器，至此完成權限控制初始化。動態加載路由后，路由組件將隨之加載并渲染，而后展現前端界面。

為解決瀏覽器刷新路由重置的問題，拿到token后要將其保存到sessionStorage，根組件的created鉤子負責檢查本地是否已有token，如果有則無需登錄直接用該token獲取權限并初始化，如果token有效且當前路由有權訪問，將加載路由組件并正確展現；若當前路由無權訪問將按路由設置跳轉404；如果token失效，后端應返回4xx狀態碼，前端統一為axios實例添加錯誤攔截器，遇到4xx狀態碼執行退出操作，清除sessionStorage數據并跳轉到登錄頁，讓用戶重新登錄。

最小依賴原則

Vue-Access-Control的定位是單一領域解決方案，除了Vue/Vue-Router/axios之外沒有其他依賴，理論上可以無障礙的應用到任何有權限控制需求的Vue項目中，項目基于webpack 模板開發構建，大多數新項目可以直接基于檢出代碼繼續開發。需要說明的是，項目額外引入的Element-UI和CryptoJS僅用于開發演示界面，他們不是必須且與權限控制毫無關系，項目應用中可以自行取舍。

目錄結構

src/ |-- api/     //接口文件 |  |-- index.js    //輸出通用axios實例 |  |-- account.js   //按業務模塊組織的接口文件，所有接口都引用./index提供的axios實例 |-- assets/ |-- components/ |-- router/ |  |-- fullpath.js   //完整路由數據，用于匹配用戶的路由權限得到實際路由 |  `-- index.js   //輸出基礎路由實例 |-- views/ |-- App.vue ·-- main.js

數據格式約定

路由權限數據必須是如下格式的對象數組，id和parent_id相同的兩個路由具有上下級關系，如果希望使用自定義格式的路由數據，需要修改路由控制的相關實現。

[ {  "id": "1",  "name": "菜單1",  "parent_id": null,  "route": "route1" }, {  "id": "2",  "name": "菜單1-1",  "parent_id": "1",  "route": "route2" } ]