Vue 後台管理控制用戶許可權的解決方案？

公司正在做一個後台管理系統，其中涉及到用戶許可權的問題（不同許可權的用戶顯示不同的功能和界面之類的）。目前用的是 Vue 來做前端，Laravel 做後端，前後端分離開發純通過 API 交互。求教有什麼好的解決方案（純前端來做，不用 blade 模板之類的）？

我的初步想法類似這樣：

1. 獲取許可權信息

const permission = {"modify": true, "delete": false, "create": true}

2. 在 Vue 里用 v-if 之類的或者自己寫個指令控制

&

可是這樣太僵硬了，總不能在每個需要控制的組件上都加上這種判斷吧。。。

你可以寫一個自定義指令嘛，比如：

&刪除&


然後處理指令的時候檢查 this.permission.delete 的真假。

---

如果不同用戶的許可權分類有限，即用戶角色有限，可以使用路由來控制，每個角色打開不同路由。

如果一個功能界面不同角色差不多，比如管理員有刪除功能，就多一個刪除按鈕，可以使用組件配置功能，在路由那裡給組件傳遞一個參數即可。比如管理員路由就傳遞isadmin為true。

---

針對頁面級的差異， 有兩個方法：

1. 動態掛載路由

2. 全局路由守衛（我自創的詞）

動態掛載路由，先定義好不同的routes數組，登錄後根據用戶的不同角色掛載不同的routes數組到router。缺點是訪問許可權不夠的頁面會返回404（頁面未找到）而不是401（許可權不夠）。失去了語義。

全局路由守衛就是， router.forEach這樣，每個路由都有個meta數據，包含了可以訪問這個頁面的role，然後根據用戶的role信息判斷是否可以進入， 不可進入就返回401頁面。

針對局部的（比如添加刪除按鈕是否應該存在等），按照顧10的方法就是很完美的。

……

竟然還有有說什麼許可權應該又後端控制云云，這裡順便科普一下。

後端是百分百要控制許可權的，但是如果前端不控制許可權，普通用戶進入了管理員的頁面，有個刪除按鈕卻刪除不了，是不是很蛋疼？明明是學生，上邊這個老師，是不是要罵人？

---

-------------- update -------------------------

相關代碼已開源，見：Vue-Access-Control

-------------- 原 -------------------------------

1. 按鈕的顯示隱藏用指令做，指令僅使用bind回調，防止無謂的代碼執行；
2. 指令內部的校驗邏輯抽象成方法，全局混入Vue，方便對各組件界面里的"v-if"提供支持；
3. 做好這些之後還要對AJAX請求集中設置攔截器，根據method+url校驗許可權，作為第二道防線；
4. 路由方面，如果應用規模很小可以在before鉤子里做路由校驗，否則最好能在Vue初始化之前拿到用戶的路由許可權，根據許可權篩選出實際可用路由再初始化Vue應用，同時菜單也可以直接用這份路由數據來生成，一舉兩得；

更具體的細節參考這裡：基於Vue實現後台系統許可權控制

最後，說前端許可權控制沒用的，我只能說您是外行。

---

你可以看看這個 purocean/laravel-template

用路由限制一部分。但是題主描述的這種粒度， 也就是說只能這種方式，沒有更優雅的了吧。不過自定義一個指令確實可以少寫一些代碼。

---

前端和後端都進行控制，安全和體驗得到兼顧。按鈕用自定義指令集，瀏覽器導航欄路由在beforeEach 進行處理

---

我是這麼做的

1.登錄的時候後台返回一個許可權值list，給需要哪種許可權的節點都加上，尤其是路由，has-permission=scanner。路由我是直接給該路由加一個permission屬性來統一控制。

2.寫一個interceptor，監聽後台返回的狀態，如401事件，給出一個提示框，防止他在瀏覽器地址欄輸入路由。 我是直接給跳到登錄頁了。主要是後台不要給他請求成功就行，當然後台控制是最方便的...

---

最近也在用 element-ui+vue-router 和 laravel 做後台，跟你是一樣做的，用 json API 交互。

我的左側菜單渲染使用的ajax渲染，後台只讀取此用戶有許可權的菜單json。其他的如果用瀏覽器地址訪問了(初始會出現vue頁面，但ajax時與後台交互就會知道沒有許可權)就notify組件提示無許可權，就是說會出現頁面，但數據請求會提示無許可權。當然可以再跳一次到一個新的無許可權頁面，想想還是算了，老是跳。

---

由於vue又小又輕，可以有兩種方式：

1. 前後端半分離：

路由由伺服器控制，實際頁面也是服務端渲染，每個頁面集成vue實例。這樣頁面的「根據許可權顯示ui組件」可以由服務端控制，除了初始化時的界面外，後續數據交互、界面變化根據ajax的返回來判斷，相當於也是由伺服器控制。

2. 完整的前後端分離：

路由、許可權管理均由前端自行控制，那麼在頁面載入前，vue需要從伺服器獲得所有許可權與本地指令的映射關係。用戶發生登錄行為後，根據伺服器返回的可用許可權，每個頁面都按指令判斷。

---

目前市面上最為實在的解決方案：https://github.com/OneWayTech/vue-auth-solution

---

許可權CMS最開始由前端來控制，就像樓上說的自定義指令，但是後來發現太多了，管理員、用戶、審核、財務等太多許可權要分開，前端太不方便了，於是直接改用後端來控制，登錄之後後台返回JSON，然後重新定義路由，如下：

對了，默認要生成以下路由，不然無法登陸的。

---

前端唯一需要的就是根據當前用戶的授權情況來決定哪些資源是可見/可用的，僅此而已。舉個栗子吧，一般的管理後台，總是會有一個導航欄和菜單欄。導航欄/菜單欄的內容不應該前端寫死，應該調用介面來獲取。這樣，服務端就可以根據用戶的授權情況返回相應的數據。但是，你要知道：這樣做不是為了安全，而是為了用戶體驗。

保障安全的事情要在服務端進行，因為前端是不可信的，介面沒有返回的數據，前端只要知道就可以生造。所以需要在每個介面進行鑒權，這個最好要有一套完整的授權/鑒權體系來支撐。

---

websanova/vue-auth 這個肯定是你想要的

---

最近剛好遇到這個問題 許可權控制應該由後端在介面裡面做 前端只是獲取一個數據來控制是否顯示

---

反對這個問題本身。永遠不要僅僅依靠前端做許可權控制，人家f12一下花點時間研讀一下你代碼搞明白api之後，你的許可權就完全沒用老人。必須在後端搞許可權控制。

---

一般情況許可權控制都是在後台，前端只是處理少量數據，主要負責顯示，不能處理太複雜的邏輯信息，不然這樣會使得前端太複雜，以後要變的時候改得太多。。。。

---

推薦閱讀：