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