欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

用代碼實現(xiàn)vue路由權限校驗功能

這篇文章主要為大家展示了用代碼實現(xiàn)vue路由權限校驗功能，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

10年積累的成都網(wǎng)站設計、做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設流程，更有山南免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

引言

做后臺系統(tǒng)的時候，難免會有用戶權限的判斷。admin可以查看全部菜單，user只能查看部分菜單。

一開始接觸這個需求的時候，完全是純前端做的。在配置路由的時候，加一個roles的屬性，通過判斷用戶的roles是否與路由的roles屬性相匹配來作為顯示隱藏的依據(jù)

{
 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
}

這樣做確實可以實現(xiàn)給不同用戶展示不同的菜單。但是如果用戶權限發(fā)生改變，前端就需要發(fā)版。本著萬物皆可靈活配置的原則。

需求

首先我們要了解，我們要做什么。

我們希望我們可以通過用戶權限配置功能，達到靈活配置路由權限，由服務器端返回需要展示的路由權限，前端做展示。

思路

  • 前端配置好項目全部頁面的路由
  • 服務器端返回該用戶的權限列表，前端去匹配，最后返回一個路由列表，作為菜單
  • 為了更好的用戶體驗，當用戶輸入異常的路由時，我們要重定向到一個404頁面，提示用戶該頁面不存在。
  • 基于第3點，我們在每次跳轉(zhuǎn)的時候，還需要判斷這個頁面是否存在，該用戶是否有權限進行跳轉(zhuǎn)

實現(xiàn)

ok 思路整理完了。現(xiàn)在就開始來實現(xiàn)吧！

首先，routers是需要在前端注冊，我們要先配置整個頁面的routers。

除了系統(tǒng)的菜單之外，我們還需要配置403錯誤頁面，還有l(wèi)ogin、首頁這些基本路由。由于系統(tǒng)菜單還需要與服務器端返回的路由列表進行匹配，暫時不進行注冊

// 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)

全部路由都注冊完了，接下來就要匹配用戶可訪問的路由了，這一步需要和服務器端一起約定規(guī)則。

// 服務器端返回的鍵值對： 路由名：是否有權限
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])

到此我們就得到了用戶有權限的頁面了，可以把得到的列表作為系統(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 {
 // 校驗用戶權限
 checkUser(next, to ,router)
 }
})

const checkUser = async (next, to ,router) => {
 if (isNotUser) {
 // 首次登陸系統(tǒng)，沒有用戶信息的時候 需要獲取用戶信息做過濾路由的操作
 const authRouter = getAuthRouter() // 獲取用戶權限
 checkMenuList(appRouterCopy, authRouter)
 const error404Page = { path: '/*', name: 'error-404', meta: { title: '404-頁面不存在'}, component: error404Page}
 router.addRoutes([...appRouterCopy, error404Page])
 if (!appRouterCopy.length) {
  // 用戶沒有有權限的路由 可以跳轉(zhuǎn)到404或者登錄頁
  next({ ...error404Page, replace: true })
 } else {
  next({ ...to, replace: true })
 }
 } else {
 next()
 }
}

以上就是關于用代碼實現(xiàn)vue路由權限校驗功能的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。

當前文章：用代碼實現(xiàn)vue路由權限校驗功能
文章源于：http://www.chinadenli.net/article4/iphhie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站維護、動態(tài)網(wǎng)站、全網(wǎng)營銷推廣、云服務器、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設