做後台管理系統，我們經常需要對各個使用者進行許可權的管理，不同許可權的使用者所能看到的頁面也不相同，那麼我們應該怎麼做呢。下面，我說說我近期的實戰案例。
寫路由這一步正常寫就行，沒什麼特別的地方
,,
children:
},, redirect:
"/index/test1"
, children:[,
]},,
]},
這也很簡單，將你配好的各種路由對應哪個頁面的資訊發給後端就行，後端需要進行配置，用於在不同許可權的人登入時返回你不同的有許可權的路由資訊。
返回資訊有多種，可以使name，也可以是數字，這個沒有固定的，自認為自己怎麼好弄怎麼來，我一般直接讓後端直接返給我有許可權的路徑陣列。
import
from
"@/router/index"
;import lodash from
"lodash"
;const routerdata =
, mutations:},
actions:
, options)
// 通過遞迴路由表，刪除掉沒有許可權的路由
function
eachselect
(routers, componentname)if(
componentname.
indexof
(item.path)==-
1&&routers[routers.
findindex
(v => v.name === item.name)
].children
.length ==0)
});}
function
getmenucode
(menu)
else})
;}return menus;
}var menus =
getmenucode
(options.menus)
;eachselect
(defaultrouter, menus)
;commit
("setrouters"
, addrouter);}
}};export
default routerdata;
想要看懂流程請先了解findindex，indexof，splice
login()
;this
.loading =
true
;//改變loading狀態
sign
(data)
.then
(res =>);
that.$router.
push()
;this
.$notify()
;}else);
}this
.loading =
false;}
).catch
(err =>);
this
.loading =
false;}
);},
setrole
(state, options)
; sessionstorage.
setitem
("info"
,json
.stringify
(store.getters.info));
//儲存使用者資訊到快取
store.
dispatch
("newroutes",)
; router.
addroutes
(store.getters.addrouters)
;//這裡是新增無需驗證的動態路由
},
router.
beforeeach
((to,
from
, next)
=>
else);
})()
;next()
;}else);
}}}else
else);
}}})
;
state:
,
2、儲存返回的使用者資訊和許可權路由（vuex和快取）
3、觸發路由守衛，呼叫路由篩選
4、根據資料，刪除無許可權的路由資訊
5、返回篩選後的路由資訊
6、渲染路由和頁面
7、重新整理觸發3-6
vue後台管理系統動態路由的實現
每個使用者登入後台管理系統看到的側邊欄，訪問的路由都不一樣 一般有兩種方法 第一種是前端寫死路由，如果使用者沒有這個路由許可權，就顯示你沒有訪問許可權，但這種看到側邊欄有這個模組但看不到就不太好，所以這裡講第二種方法 第二種是由後端傳動態路由給前端，具體實現如下 第一步 首先確定靜態路由，我單獨寫了...
vue 後台系統許可權管理
最近在做乙個後台管理系統，一般的後台系統都有許可權管理這塊，下面我就分享下我實現許可權管理這塊的思路。首先說下這個系統前端用到的技術棧，vue全家桶,element ui,axios。首先，使用者的許可權是通過前端來進行配置的，那麼就需要乙個頁面去進行使用者的許可權配置。在使用者登入之後，通過請求後...
vue 許可權管理 動態路由（6）
1.動態生成路由 import vue from vue import router from vue router import nprogress from nprogress progress bar import nprogress nprogress.css progress bar st...