vue路由權(quán)限校驗功能的實現(xiàn)代碼
引言
做后臺系統(tǒng)的時候,難免會有用戶權(quán)限的判斷。admin可以查看全部菜單,user只能查看部分菜單。
一開始接觸這個需求的時候,完全是純前端做的。在配置路由的時候,加一個roles的屬性,通過判斷用戶的roles是否與路由的roles屬性相匹配來作為顯示隱藏的依據(jù)
{ path: '/router', name: 'router', meta: { title: '標(biāo)題', roles: ['admin','user'] }, component: index, children: [ { path: 'children', name: 'children', meta: { title: '子標(biāo)題', 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 }
這樣做確實可以實現(xiàn)給不同用戶展示不同的菜單。但是如果用戶權(quán)限發(fā)生改變,前端就需要發(fā)版。本著萬物皆可靈活配置的原則。
需求
首先我們要了解,我們要做什么。
我們希望我們可以通過用戶權(quán)限配置功能,達到靈活配置路由權(quán)限,由服務(wù)器端返回需要展示的路由權(quán)限,前端做展示。
思路
- 前端配置好項目全部頁面的路由
- 服務(wù)器端返回該用戶的權(quán)限列表,前端去匹配,最后返回一個路由列表,作為菜單
- 為了更好的用戶體驗,當(dāng)用戶輸入異常的路由時,我們要重定向到一個404頁面,提示用戶該頁面不存在。
- 基于第3點,我們在每次跳轉(zhuǎn)的時候,還需要判斷這個頁面是否存在,該用戶是否有權(quán)限進行跳轉(zhuǎn)
實現(xiàn)
ok 思路整理完了。現(xiàn)在就開始來實現(xiàn)吧!
首先,routers是需要在前端注冊,我們要先配置整個頁面的routers。
除了系統(tǒng)的菜單之外,我們還需要配置403錯誤頁面,還有l(wèi)ogin、首頁這些基本路由。由于系統(tǒng)菜單還需要與服務(wù)器端返回的路由列表進行匹配,暫時不進行注冊
// 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)
全部路由都注冊完了,接下來就要匹配用戶可訪問的路由了,這一步需要和服務(wù)器端一起約定規(guī)則。
// 服務(wù)器端返回的鍵值對: 路由名:是否有權(quán)限 authRouter:{ 'test1': false, 'test2': true }
拿到服務(wù)器端返回的用戶權(quán)限之后,就開始過濾路由
// 過濾路由 appRouterCopy-項目全部頁面 authRouter-權(quán)限列表 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])
到此我們就得到了用戶有權(quán)限的頁面了,可以把得到的列表作為系統(tǒng)菜單渲染上去。接下來就要處理一下跳轉(zhuǎn)異常的狀況了。需要用到beforeEach
對每次跳轉(zhuǎn)進行攔截判斷
router.beforeEach(((to, from, next) => { if (isNotLog && to.name !== 'login') { // 未登錄 跳轉(zhuǎn)到登錄頁 next({ name: 'login' }) } else if (to.name && (to.name === 'login' || to.name.indexOf('error') !== -1)){ // 跳轉(zhuǎn)異常 next() } else { // 校驗用戶權(quán)限 checkUser(next, to ,router) } }) const checkUser = async (next, to ,router) => { if (isNotUser) { // 首次登陸系統(tǒng),沒有用戶信息的時候 需要獲取用戶信息做過濾路由的操作 const authRouter = getAuthRouter() // 獲取用戶權(quán)限 checkMenuList(appRouterCopy, authRouter) const error404Page = { path: '/*', name: 'error-404', meta: { title: '404-頁面不存在'}, component: error404Page} router.addRoutes([...appRouterCopy, error404Page]) if (!appRouterCopy.length) { // 用戶沒有有權(quán)限的路由 可以跳轉(zhuǎn)到404或者登錄頁 next({ ...error404Page, replace: true }) } else { next({ ...to, replace: true }) } } else { next() } }
總結(jié)
到此這篇關(guān)于vue路由權(quán)限校驗功能的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)vue路由權(quán)限校驗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue 權(quán)限控制的兩種方法(路由驗證)
- 關(guān)于Vue的路由權(quán)限管理的示例代碼
- vue 設(shè)置路由的登錄權(quán)限的方法
- vuex根據(jù)不同的用戶權(quán)限展示不同的路由列表功能
- vue路由守衛(wèi),限制前端頁面訪問權(quán)限的例子
- Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
- vue權(quán)限路由實現(xiàn)的方法示例總結(jié)
- vue自定義指令和動態(tài)路由實現(xiàn)權(quán)限控制
- vue-router 控制路由權(quán)限的實現(xiàn)
- vue動態(tài)設(shè)置路由權(quán)限的主要思路
相關(guān)文章
js 創(chuàng)建對象的多種方式與優(yōu)缺點小結(jié)
這篇文章主要介紹了js 創(chuàng)建對象的多種方式與優(yōu)缺點,幫助大家更好的理解和學(xué)習(xí)使用JavaScript,感興趣的朋友可以了解下2021-03-03JS+canvas畫布實現(xiàn)炫酷的旋轉(zhuǎn)星空效果示例
這篇文章主要介紹了JS+canvas畫布實現(xiàn)炫酷的旋轉(zhuǎn)星空效果,結(jié)合實例形式分析了js結(jié)合HTML5 canvas圖形繪制與數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02js 實現(xiàn)在離開頁面時提醒未保存的信息(減少用戶重復(fù)操作)
在離開頁面時判斷是否有未保存的輸入值,然后進行提醒,接下來介紹實現(xiàn)步驟,感興趣的朋友可以了解下2013-01-01JS實現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼
這篇文章主要介紹了JS實現(xiàn)自定義簡單網(wǎng)頁軟鍵盤效果代碼,可實現(xiàn)簡單模擬鍵盤布局及響應(yīng)鼠標(biāo)點擊按下鍵盤按鍵功能,簡單實用,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11