權限控制是后臺管理系統(tǒng)比較常見的需求，如果我們需要對某些頁面的添加權限控制的話，那我們可以在路由管理中的權限做一些校驗，沒有通過權限校驗的給出相應的提示或者直接跳轉(zhuǎn)到報錯頁面。

跟著我一起來學vue實戰(zhàn)篇路由管理權限吧!

權限校驗函數(shù)

getCurrentAuthority()函數(shù)用于獲取當前用戶權限，一般來源于后臺數(shù)據(jù)

check()函數(shù)用于權限的校驗匹配

isLogin()函數(shù)用于檢驗用戶是否登錄

路由配置元信息

路由配置元信息meta:{ authority: ["admin"] }

路由守衛(wèi)router.beforeEach中判斷

使用to.matched獲取跳轉(zhuǎn)路由的全部信息,包括父路由和子路由

使用lodash中的findLast匹配離跳轉(zhuǎn)路由配置權限的元信息

引入auth.js中check()和isLogin()進行判斷是否具有權限或是否已登錄

如果沒有權限則給出提示信息后跳轉(zhuǎn)到403頁面,未登錄則返回登錄頁面

運行結(jié)果

當getCurrentAuthority()函數(shù)返回admin時，則菜單會顯示所有元信息meta:{ authority: ["admin"] }的路由菜單；

如返回值為user時，菜單會顯示所有元信息meta:{ authority: ["user"] }的路由菜單