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

跟著我一起來學vue實戰篇路由管理權限吧!

權限校驗函數

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

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

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

路由配置元信息

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

路由守衛router.beforeEach中判斷

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

使用lodash中的findLast匹配離跳轉路由配置權限的元信息

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

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

運行結果

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

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