權(quán)限控制是后臺管理系統(tǒng)比較常見的需求驼侠，如果我們需要對某些頁面的添加權(quán)限控制的話姿鸿，那我們可以在路由管理中的權(quán)限做一些校驗(yàn)，沒有通過權(quán)限校驗(yàn)的給出相應(yīng)的提示或者直接跳轉(zhuǎn)到報(bào)錯(cuò)頁面倒源。
跟著我一起來學(xué)vue實(shí)戰(zhàn)篇路由管理權(quán)限吧!
權(quán)限校驗(yàn)函數(shù)
getCurrentAuthority()函數(shù)用于獲取當(dāng)前用戶權(quán)限苛预，一般來源于后臺數(shù)據(jù)
check()函數(shù)用于權(quán)限的校驗(yàn)匹配
isLogin()函數(shù)用于檢驗(yàn)用戶是否登錄
路由配置元信息
路由配置元信息meta:{ authority: ["admin"] }
路由守衛(wèi)router.beforeEach中判斷
使用to.matched獲取跳轉(zhuǎn)路由的全部信息,包括父路由和子路由
使用lodash中的findLast匹配離跳轉(zhuǎn)路由配置權(quán)限的元信息
引入auth.js中check()和isLogin()進(jìn)行判斷是否具有權(quán)限或是否已登錄
如果沒有權(quán)限則給出提示信息后跳轉(zhuǎn)到403頁面,未登錄則返回登錄頁面
運(yùn)行結(jié)果
當(dāng)getCurrentAuthority()函數(shù)返回admin時(shí)，則菜單會顯示所有元信息meta:{ authority: ["admin"] }的路由菜單笋熬；
如返回值為user時(shí)碟渺，菜單會顯示所有元信息meta:{ authority: ["user"] }的路由菜單
以上就是我們權(quán)限控制中路由管理的全部內(nèi)容，關(guān)注我獲取"實(shí)戰(zhàn)篇"源碼！
接下來CrabFort會帶大家一起實(shí)現(xiàn)更加精細(xì)化的權(quán)限設(shè)計(jì)（權(quán)限組件苫拍、權(quán)限指令）
