偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

后臺(tái)管理系統(tǒng)如何利用Vue-Router做權(quán)限驗(yàn)證管理

開發(fā) 項(xiàng)目管理
今天我們就來講一下在后臺(tái)的權(quán)限管理系統(tǒng)中,Vue-Router是如何配合實(shí)現(xiàn)的。

前沿

后臺(tái)管理系統(tǒng)中權(quán)限驗(yàn)證是比較核心的一塊內(nèi)容,每個(gè)登錄用戶都有對應(yīng)的角色,每個(gè)角色都有對應(yīng)的權(quán)限,比如普通用戶只有查看權(quán)限,管理員用戶有編輯權(quán)限,所以不同的用戶角色登錄進(jìn)來后,看到的頁面菜單是不一樣的

今天我們就來講一下在后臺(tái)的權(quán)限管理系統(tǒng)中,Vue-Router是如何配合實(shí)現(xiàn)的

后臺(tái)管理系統(tǒng)

具體實(shí)現(xiàn)

其實(shí)要實(shí)現(xià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是頁面
isFolder: true,
// 圖標(biāo)
icon: 'article',
// 是否在導(dǎo)航欄不顯示,false表示顯示
hidden: false,
// 路由url
url: '/article',
// 子菜單
menuList: [{
// 菜單名字
name: '文章編輯',
// 是否是菜單,true是,false是頁面
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: [{
// 這是頁面路由
path: '/article/edit',
name: 'article/edit',
// 具體的頁面組件
component: () => import('@/views/article/edit.vue'),
meta: {
// 圖標(biāo)
icon: 'edit',
// 頁面名字
title: '文章編輯',
// 是否在導(dǎo)航欄隱藏
hidden: false,
},
}],
},
{
path: '/article/edit',
name: 'article/edit',
component: () => import('@/views/article/edit.vue'),
meta: {
icon: 'edit',
title: '文章編輯',
hidden: false,
},
},
]

// 最開始的路由配置是有一個(gè)登錄頁的
const initRoutes = [
{
path: '/login',
name: 'Login',
component: () => import('@/views/login'),
meta: {
icon: '',
title: '登錄',
hidden: true,
},
},
]

// 登錄成功后
// 再把動(dòng)態(tài)生成的路由信息和登錄頁的路由拼接起來
// 生成最后的路由信息
router.addRoutes(initRoutes.concat(routes))

// 最后通過router.push(url)
// 跳轉(zhuǎn)到動(dòng)態(tài)生成的第一個(gè)路由頁面

至于頁面內(nèi)部的按鈕根據(jù)用戶角色顯示和隱藏,比如說普通用戶是看不到頁面的“編輯”按鈕

其實(shí)我們可以在用戶登錄成功后,讓后臺(tái)再把當(dāng)前這個(gè)用戶的角色信息返回并存在Vuex中,比如返回['user']代表普通用戶,返回['manage']代表管理員,返回['user','mange']代表又有管理員的權(quán)限和又有普通用戶的權(quán)限,然后我們就可以在頁面中根據(jù)這個(gè)值判定是否顯示對應(yīng)的按鈕

2、beforeEach

通過 router.beforeEach 這個(gè)導(dǎo)航守衛(wèi),控制沒有登錄的用戶,始終只能先去登錄頁登錄,如果是已經(jīng)登錄過的,那么就直接進(jìn)入對應(yīng)頁面

// 這里可以放一些,不需要權(quán)限校驗(yàn)的菜單
const NoAuthUrlList = [
'/500',
'/demo',
]
router.beforeEach((to, from, next) => {
if (NoAuthUrlList.includes(to.path)) {
// 不需要權(quán)限校驗(yàn)的,直接進(jìn)入頁面
next()
} else {
// 需要權(quán)限校驗(yàn)的
if (!store.getters.token) {
// 沒有token代表沒有登錄過
// 直接去登錄頁
next('/login')
} else {
// 有token
// 直接進(jìn)入登錄頁
next()
}
}
})

好了Vue-Router做權(quán)限驗(yàn)證管理就講到這里

責(zé)任編輯:姜華 來源: 今日頭條
相關(guān)推薦

2021-11-11 08:20:47

Vue 技巧 開發(fā)工具

2025-01-07 08:00:00

2022-02-10 10:10:03

數(shù)據(jù)庫表權(quán)限表數(shù)據(jù)庫操作

2021-12-14 19:40:07

Node路由Vue

2024-05-06 00:00:00

后臺(tái)管理系統(tǒng)

2022-02-02 21:29:39

路由模式Vue-Router

2025-01-03 09:34:54

2025-04-09 09:29:57

2023-07-31 11:43:45

視頻管理系VMS

2011-09-02 11:39:53

2022-06-24 07:15:53

Vuehistory模式

2024-08-19 09:25:42

2010-04-09 17:35:22

2025-05-19 08:10:00

PythonDashGo開源

2025-02-12 09:00:00

2023-12-14 08:13:56

2021-01-12 15:54:03

Vue開發(fā)管理系統(tǒng)

2010-04-14 14:30:28

Unix操作系統(tǒng)

2021-04-27 07:39:40

Vue后臺(tái)管理

2025-05-15 08:35:00

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)