最近搭建了公司的后臺管理系統, 而且系統還比較龐大, 要實現以下幾點:
菜單權限, 根據不同權限顯示不同的菜單
操作權限, 比如有些賬號沒有新增權限, 有些沒有修改或者刪除權限
數據權限, 比如統計概況, 普通管理員不能看到公司營業概況,但能看到自己所屬區域的概況
顯示權限, 比如列表, 運營能看到那一列的簽約金額,但市場不能看到簽約金額這一列
到目前為止還在構建中, 已經解決菜單權限和操作權限。
菜單權限:
最開始的時候也是按照樓上給出的方法,本地先配置一套路由,然后登陸成功后會從服務器返回一個菜單列表,然后在beforeEach里面把返回的菜單列表和本地配置的路由進行對比, 如果存在則有權限訪問。 做了幾天發現很難用, 本地得配置一整套路由,還得做幾個頁面來把這些路由信息寫入到服務器,這樣來進行權限分配, 當你的權限菜單比較多的時候, 像我們這個后臺,光公司內部權限就有好幾套, 還有代理商、商家權限等等, 不同的菜單可能會超過幾百個, 這樣配置太累了,還容易出錯。
最后的解決思路是完全不在本地做任何路由配置, 登錄頁面單獨弄,不放到vue組件里面, 登錄成功后從后臺抓取菜單列表, 因為現在是已經登錄成功了,所以抓取的就是擁有全新的菜單。 抓取成功后在配置到路由里面,然后實例化vue , 這樣就避免了本地配置一套路由了,完全是服務器上面配置路由。
這樣解決的難點只有一個,那就是路由需要對應的組件,所以我們將所有組件存放到一個對象里面, 服務器的返回的菜單列表里面,會有一個字段配置組件名, 在抓取成功后生成路由配置的時候就使用 router[menuName]就能直接加載到這個組件,非常方便。
main.js代碼片段:
componentConfigs.js 代碼片段:
服務器返回的菜單json:
其中meta 字段里面是當前路由里的操作權限
菜單的權限大概就是這樣, 至于操作權限, 思路是這樣的: 寫一個鑒權的vue插件, 然后所有的操作獨立放到methods里面; 然后所有的操作 @click里面調用鑒權函數, $auth('add', arg1, arg2, ...argN) ; $auth里面判斷this.$route.meta 里是否有權限進行這個操作, 如果有則調用 this[authName].apply(null, arg);
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com