后臺管理系統如何利用Vue-Router做權限驗證管理
作者：前端亦可行
今天我們就來講一下在后臺的權限管理系統中，Vue-Router是如何配合實現的。
前沿
后臺管理系統中權限驗證是比較核心的一塊內容，每個登錄用戶都有對應的角色，每個角色都有對應的權限，比如普通用戶只有查看權限，管理員用戶有編輯權限，所以不同的用戶角色登錄進來后，看到的頁面菜單是不一樣的
今天我們就來講一下在后臺的權限管理系統中，Vue-Router是如何配合實現的
后臺管理系統
具體實現
其實要實現起來也比較簡單，主要是借助Vue-Router的兩個api
1、addRoutes
通過 router.addRoutes 動態掛載路由信息，用戶成功登錄后，由后臺返回當前用戶所具有的權限菜單
// 登錄成功后，后臺返回權限數據如下
const menuList= [
{
// 菜單名字
name: '文章管理',
// 是否是菜單，true是，false是頁面
isFolder: true,
// 圖標
icon: 'article',
// 是否在導航欄不顯示，false表示顯示
hidden: false,
// 路由url
url: '/article',
// 子菜單
menuList: [{
// 菜單名字
name: '文章編輯',
// 是否是菜單，true是，false是頁面
isFolder: false,
// 圖標
icon: 'edit',
// 是否在導航欄不顯示，false表示顯示
hidden: false,
// 路由url
url: '/article/edit',
// 子菜單
menuList: [],
}]
},
{
name: '用戶管理',
isFolder: false,
icon: 'user',
hidden: false,
url: '/user/manage',
menuList: [],
}
]
// 我們根據Vue-Router需要的數據
// 把上面后臺返回的數據做一次轉化
const routes= [{
// 路由路徑
path: '/article',
// 如果是菜單，那么引用通用的布局模板
component: () => import('@/views/layout.vue'),
meta: {
// 圖標
icon: 'article',
// 菜單名字
title: '文章管理',
// 是否在導航欄隱藏
hidden: false,
},
children: [{
// 這是頁面路由
path: '/article/edit',
name: 'article/edit',
// 具體的頁面組件
component: () => import('@/views/article/edit.vue'),
meta: {
// 圖標
icon: 'edit',
// 頁面名字
title: '文章編輯',
// 是否在導航欄隱藏
hidden: false,
},
}],
},
{
path: '/article/edit',
name: 'article/edit',
component: () => import('@/views/article/edit.vue'),
meta: {
icon: 'edit',
title: '文章編輯',
hidden: false,
},
},
]
// 最開始的路由配置是有一個登錄頁的
const initRoutes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login'),
meta: {
icon: '',
title: '登錄',
hidden: true,
},
},
]
// 登錄成功后
// 再把動態生成的路由信息和登錄頁的路由拼接起來
// 生成最后的路由信息
router.addRoutes(initRoutes.concat(routes))
// 最后通過router.push(url)
// 跳轉到動態生成的第一個路由頁面
至于頁面內部的按鈕根據用戶角色顯示和隱藏，比如說普通用戶是看不到頁面的“編輯”按鈕
其實我們可以在用戶登錄成功后，讓后臺再把當前這個用戶的角色信息返回并存在Vuex中，比如返回['user']代表普通用戶，返回['manage']代表管理員，返回['user','mange']代表又有管理員的權限和又有普通用戶的權限，然后我們就可以在頁面中根據這個值判定是否顯示對應的按鈕
2、beforeEach
通過 router.beforeEach 這個導航守衛，控制沒有登錄的用戶，始終只能先去登錄頁登錄，如果是已經登錄過的，那么就直接進入對應頁面
// 這里可以放一些，不需要權限校驗的菜單
const NoAuthUrlList = [
'/500',
'/demo',
]
router.beforeEach((to, from, next) => {
if (NoAuthUrlList.includes(to.path)) {
// 不需要權限校驗的，直接進入頁面
next()
} else {
// 需要權限校驗的
if (!store.getters.token) {
// 沒有token代表沒有登錄過
// 直接去登錄頁
next('/login')
} else {
// 有token
// 直接進入登錄頁
next()
}
}
})
好了Vue-Router做權限驗證管理就講到這里
責任編輯：姜華
來源：
今日頭條
