溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了用代碼實現vue路由權限校驗功能，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
引言
做后臺系統的時候，難免會有用戶權限的判斷。admin可以查看全部菜單，user只能查看部分菜單。
一開始接觸這個需求的時候，完全是純前端做的。在配置路由的時候，加一個roles的屬性，通過判斷用戶的roles是否與路由的roles屬性相匹配來作為顯示隱藏的依據
{
path: '/router',
name: 'router',
meta: {
title: '標題',
roles: ['admin','user']
},
component: index,
children: [
{
path: 'children',
name: 'children',
meta: {
title: '子標題',
roles: ['admin','user']
},
component: child
}
]
}// 過濾路由 menuList-菜單 roles-用戶角色
const checkMenuList = (menuList, roles) => {
for (let i = 0; i < menuList.length; i++) {
if (!compareEqual(roles, menuList[i].meta.roles) || menuList[i].meta.noRenderTree) {
menuList.splice(i, 1)
i -= 1
} else {
if (menuList[i].children) {
checkMenuList(menuList[i].children, roles)
}
}
}
return menuList
}這樣做確實可以實現給不同用戶展示不同的菜單。但是如果用戶權限發生改變，前端就需要發版。本著萬物皆可靈活配置的原則。
需求
首先我們要了解，我們要做什么。
我們希望我們可以通過用戶權限配置功能，達到靈活配置路由權限，由服務器端返回需要展示的路由權限，前端做展示。
思路
實現
ok 思路整理完了。現在就開始來實現吧！
首先，routers是需要在前端注冊，我們要先配置整個頁面的routers。
除了系統的菜單之外，我們還需要配置403錯誤頁面，還有login、首頁這些基本路由。由于系統菜單還需要與服務器端返回的路由列表進行匹配，暫時不進行注冊
// router.js
// 基本路由
export const defaultRouter = [
{ path: '/', component: index }, // 首頁
{ path: '/login', name: 'login', component: login } // 登錄頁
]
// 項目全部頁面
export const appRouter = [
{
path: '/router1',
name: 'router1',
redirect: '/router1/test1',
component: router1,
meta: { title: '路由1'},
children: [
{ path: 'test1', name: 'test1', component: test1, meta: { title: '測試1' } },
{ path: 'test2', name: 'test2', component: test1, meta: { title: '測試2' } }
]
},
]
// 這個是我們頁面初始化時候，注冊的routes
const routers = [
...defaultRouter
]
const RouterConfig = {
routes: routers
}
const router = new VueRouter(RouterConfig)全部路由都注冊完了，接下來就要匹配用戶可訪問的路由了，這一步需要和服務器端一起約定規則。
// 服務器端返回的鍵值對： 路由名：是否有權限
authRouter:{
'test1': false,
'test2': true
}拿到服務器端返回的用戶權限之后，就開始過濾路由
// 過濾路由 appRouterCopy-項目全部頁面 authRouter-權限列表
const checkMenuList = (appRouterCopy, authRouter) => {
for (let i = 0; i < appRouterCopy.length; i++) {
let {name, children} = appRouterCopy[i]
if (authRouter[name] === false) {
appRouterCopy.splice(i, 1)
i--
} else if (children && children.length) {
checkMenuList(children, authRouter)
}
}
}得到過濾后的路由之后，使用addRoutes進行注冊。注意404路由配置要在最后加上。
let error404Page = { path: '/*', name: 'error-404', meta:
{
title: '404-頁面不存在'}, component: error404Page
}
router.addRoutes([...appRouterCopy, error404Page])到此我們就得到了用戶有權限的頁面了，可以把得到的列表作為系統菜單渲染上去。接下來就要處理一下跳轉異常的狀況了。需要用到beforeEach對每次跳轉進行攔截判斷
router.beforeEach(((to, from, next) => {
if (isNotLog && to.name !== 'login') {
// 未登錄 跳轉到登錄頁
next({ name: 'login' })
} else if (to.name && (to.name === 'login' || to.name.indexOf('error') !== -1)){
// 跳轉異常
next()
} else {
// 校驗用戶權限
checkUser(next, to ,router)
}
})
const checkUser = async (next, to ,router) => {
if (isNotUser) {
// 首次登陸系統，沒有用戶信息的時候 需要獲取用戶信息做過濾路由的操作
const authRouter = getAuthRouter() // 獲取用戶權限
checkMenuList(appRouterCopy, authRouter)
const error404Page = { path: '/*', name: 'error-404', meta: { title: '404-頁面不存在'}, component: error404Page}
router.addRoutes([...appRouterCopy, error404Page])
if (!appRouterCopy.length) {
// 用戶沒有有權限的路由 可以跳轉到404或者登錄頁
next({ ...error404Page, replace: true })
} else {
next({ ...to, replace: true })
}
} else {
next()
}
}以上就是關于用代碼實現vue路由權限校驗功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
