前端單獨(dú)實(shí)現(xiàn)vue動(dòng)態(tài)路由的示例代碼
Vue 動(dòng)態(tài)路由權(quán)限是指在 Vue 應(yīng)用程序中,根據(jù)用戶(hù)的權(quán)限動(dòng)態(tài)生成和控制路由的行為。這意味著不是所有的路由都在應(yīng)用啟動(dòng)時(shí)就被硬編碼到路由配置中,而是根據(jù)用戶(hù)的權(quán)限信息,在運(yùn)行時(shí)動(dòng)態(tài)地決定哪些路由應(yīng)該被加載和顯示。
動(dòng)態(tài)路由的優(yōu)點(diǎn):
安全性:
- 只有經(jīng)過(guò)驗(yàn)證的用戶(hù)才能訪(fǎng)問(wèn)其權(quán)限范圍內(nèi)的頁(yè)面。
- 減少了由于硬編碼路由導(dǎo)致的安全漏洞。
靈活性:
- 可以根據(jù)用戶(hù)的權(quán)限動(dòng)態(tài)調(diào)整應(yīng)用的結(jié)構(gòu),無(wú)需重新部署整個(gè)應(yīng)用即可調(diào)整路由。
- 支持按需加載(懶加載),提高應(yīng)用性能。
用戶(hù)體驗(yàn):
- 只展示用戶(hù)可以訪(fǎng)問(wèn)的菜單項(xiàng),避免顯示無(wú)用鏈接,提高用戶(hù)體驗(yàn)。
- 用戶(hù)界面更加簡(jiǎn)潔,只顯示與其角色相關(guān)的功能。
可維護(hù)性:
- 簡(jiǎn)化了路由配置,因?yàn)椴恍枰獮槊總€(gè)角色單獨(dú)編寫(xiě)路由配置,而是集中管理權(quán)限。
- 更容易擴(kuò)展和修改權(quán)限配置,只需更新前端的權(quán)限數(shù)據(jù)即可。
開(kāi)發(fā)效率:
- 開(kāi)發(fā)者只需要關(guān)注業(yè)務(wù)邏輯,而不需要關(guān)心每個(gè)角色的具體路由配置。
- 減少了重復(fù)工作,提高了開(kāi)發(fā)效率。
實(shí)現(xiàn)步驟
定義靜態(tài)路由配置:
- 在項(xiàng)目中定義一個(gè)包含所有可能路由的靜態(tài)配置文件或?qū)ο?,每個(gè)路由可以附加權(quán)限信息(如角色、訪(fǎng)問(wèn)級(jí)別等)。
用戶(hù)登錄與鑒權(quán):
- 用戶(hù)登錄時(shí),前端存儲(chǔ)用戶(hù)的權(quán)限信息(如角色、權(quán)限列表等)。
動(dòng)態(tài)生成路由:
- 根據(jù)用戶(hù)的權(quán)限信息,從前端的靜態(tài)路由配置中篩選出用戶(hù)有權(quán)訪(fǎng)問(wèn)的路由。
- 使用遞歸算法或其他邏輯動(dòng)態(tài)生成路由配置,并添加到 Vue Router 實(shí)例中。
動(dòng)態(tài)渲染菜單:
- 根據(jù)動(dòng)態(tài)生成的路由表來(lái)渲染左側(cè)菜單或頂部導(dǎo)航欄,確保只顯示用戶(hù)有權(quán)訪(fǎng)問(wèn)的菜單項(xiàng)。
代碼示例
配置路由器
router/index.js
// router/index.js import Vue from 'vue' import VueRouter from 'vue-router' import Layout from '@/Layout/index.vue' Vue.use(VueRouter) // export const roleMap = { // '-1':'運(yùn)維管理員', // '1':'普通用戶(hù)', // '2':'項(xiàng)目經(jīng)理', // '3':'部門(mén)管理員', // '4':'綜合部管理員', // '5':'部門(mén)領(lǐng)導(dǎo)' // } // 公共路由 export const routes = [ { path: '/', name: 'redirect', component: Layout, hidden: true, // 隱藏菜單 redirect: "/homePage", // 用戶(hù)在地址欄輸入 '/' 時(shí)會(huì)自動(dòng)重定向到 /homePage 頁(yè)面 }, { path: '/homePage', component: Layout, redirect: "/homePage/index", meta: { title: "首頁(yè)", }, children: [ { path: 'index', name: 'homePageIndex', meta: { title: "首頁(yè)", }, component: () => import('@/views/homePage/index.vue') } ] }, { path: '/login', component: () => import('@/views/login.vue'), hidden: true }, { path: '/404', component: () => import('@/views/error/404.vue'), hidden: true }, { path: '/401', component: () => import('@/views/error/401.vue'), hidden: true }, ] // 動(dòng)態(tài)權(quán)限路由 export const dynamicRoutes = [ { path: '/admin', meta: { title: "系統(tǒng)管理", }, component: Layout, permission: ['-1', '2', '3', '4', '5'], // all 所有角色都可以訪(fǎng)問(wèn) 1 普通用戶(hù) 2 項(xiàng)目經(jīng)理 3 部門(mén)管理員 4 綜合部管理員 5 部門(mén)領(lǐng)導(dǎo) -1 項(xiàng)目運(yùn)維管理員 children: [ { path: 'user', name: 'userIndex', meta: { title: "用戶(hù)管理", }, permission: ['-1', '2', '3', '4', '5'], component: () => import('@/views/admin/user/index.vue') }, { path: 'role', name: 'roleIndex', meta: { title: "角色管理", }, permission: ['-1', '2', '3', '4', '5'], component: () => import('@/views/admin/role/index.vue'), children: [ { path: 'add', name: 'addRole', meta: { title: "添加角色", }, permission: ['-1',, '3', '4', '5'], component: () => import('@/views/admin/user/index.vue') }, { path: 'update', name: 'updateRole', meta: { title: "編輯角色", }, permission: ['-1', '2', '3', '4', '5'], component: () => import('@/views/admin/role/index.vue') } ] } ] }, { path: '/tableEcho', meta: { title: "表格管理", }, component: Layout, permission: ['-1', '1', '2'], children: [ { path: 'test', name: 'tableEchoIndex', meta: { title: "表格測(cè)試", }, permission: ['-1', '1', '2'], component: () => import('@/views/tableEcho/index.vue'), children: [ { path: 'add', name: 'addTable', hidden: true, meta: { title: "新增測(cè)試", }, permission: ['-1', '2'], component: () => import('@/views/tableEcho/add.vue') } ] }, ], }, ] const router = new VueRouter({ base: process.env.BASE_URL, routes }) export default router
上述代碼定義了一個(gè)公共路由
routes
和一個(gè)動(dòng)態(tài)權(quán)限控制的路由dynamicRoutes
,permission
數(shù)組定義了哪些角色擁有該路由權(quán)限, 將用戶(hù)分為6個(gè)角色級(jí)別, 每個(gè)角色對(duì)應(yīng)不同的角色級(jí)別,分別為
- ‘-1’:‘運(yùn)維管理員’,
- ‘1’:‘普通用戶(hù)’,
- ‘2’:‘項(xiàng)目經(jīng)理’,
- ‘3’:‘部門(mén)管理員’,
- ‘4’:‘綜合部管理員’,
- ‘5’:‘部門(mén)領(lǐng)導(dǎo)’,
封裝路由守衛(wèi)
permission.js
// permission.js import router from './router' import store from './store' import { Message } from 'element-ui' import { getStore } from '@/utils/store'; const whiteList = ['/login', '/404', '/401']; router.beforeEach((to, from, next) => { let token = getStore('token'); if (token) { /* has token*/ if (to.path === '/login') { next({ path: '/' }); } else { if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶(hù)是否已拉取完user_info信息 store.dispatch('GetInfo').then((res) => { console.log('--------------', res); router.addRoutes(res) // 動(dòng)態(tài)添加可訪(fǎng)問(wèn)路由表 next({ ...to, replace: true }) // hack方法 確保addRoutes已完成 }).catch(err => { store.dispatch('LogOut').then(() => { Message.error(err) next(`/`) }) }) } else { next() } } } else { // 沒(méi)有token if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單,直接進(jìn)入 next() } else { next(`/login`) // 否則全部重定向到登錄頁(yè) } } })
上述代碼表示在路由的
beforeEach
函數(shù)里面調(diào)用 vuex 里面actions
里的方法發(fā)送接口請(qǐng)求獲取用戶(hù)信息與用戶(hù)角色權(quán)限, 最后通過(guò)router.addRoutes(res)
渲染路由
permission.js 文件需引入到 main.js里面
如果項(xiàng)目 vue-router
版本超過(guò) 3.3.0, 需要遍歷路由數(shù)組再使用 router.addRoute()
方法逐個(gè)添加路由
res.forEach( route => { router.addRoute(route); })
在 vuex 里獲取用戶(hù)所擁有的權(quán)限, 過(guò)濾該權(quán)限不擁有的路由
store/index.js
// store/index.js import Vue from 'vue' import Vuex from 'vuex' import { routes, dynamicRoutes } from "@/router"; import { login, getInfo, logout } from "@/api/user"; import { setStore, clearStore } from '@/utils/store'; Vue.use(Vuex) export default new Vuex.Store({ state: { routes, token: "", roleType: "", roles: [], permissions: [], sidebarRouters: [], }, getters: { token: state => state.token, roles: state => state.roles, permissions: state => state.permissions, sidebarRouters: state => state.sidebarRouters, }, mutations: { SET_TOKEN: (state, token) => { state.token = token; }, SET_USERINFO: (state, user) => { state.userInfo = user; }, SET_ROLETYPE: (state, roleType) => { state.roleType = roleType; }, SET_ROLES: (state, roles) => { state.roles = roles; }, SET_PERMISSIONS: (state, permissions) => { state.permissions = permissions; }, SET_ROUTE: (state, sidebarRouters) => { state.sidebarRouters = sidebarRouters; }, }, actions: { Login({ commit }, userInfo) { return new Promise((resolve, reject) => { login(userInfo).then(res => { setToken(res.data.token); setStore('token', res.data.token); commit('SET_TOKEN', res.data.token); resolve(); }).catch(error => { reject(error); }) }) }, // 獲取用戶(hù)信息 GetInfo({ commit }) { return new Promise((resolve, reject) => { getInfo().then(res => { console.log('res::: ', res); if (res.data.code === 0 || 200) { const user = res.data.sysUser; const roleType = res.data.roleType; commit('SET_USERINFO', user); // roleType 用戶(hù)所用的權(quán)限級(jí)別 1 普通用戶(hù) 2 項(xiàng)目經(jīng)理 3 部門(mén)管理員 4 綜合部管理員 5 部門(mén)領(lǐng)導(dǎo) -1 項(xiàng)目運(yùn)維管理員 setStore('ROLE_TYPE', roleType); if (res.data.roles) { // 驗(yàn)證返回的roles是否為真 commit('SET_ROLES', res.data.roles); commit('SET_PERMISSIONS', res.data.permissions); } else { commit('SET_ROLES', ['ROLE_DEFAULT']); } // 過(guò)濾路由 let newRouters = filterRouter(roleType, dynamicRoutes); // 連接公共路由 const sidebarRouters = routes.concat([...newRouters]) commit('SET_ROUTE', sidebarRouters); resolve(sidebarRouters); } else { reject(error); } }).catch(error => { reject(error); }) }) }, // 退出系統(tǒng) LogOut({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { commit('SET_TOKEN', '') commit('SET_ROLES', []) commit('SET_PERMISSIONS', []) clearStore('token'); clearStore('userInfo') resolve() }).catch(error => { reject(error) }) }) }, }, modules: { } }) function filterRouter(roleType, routes) { return routes.filter(item => { // filter 方法創(chuàng)建一個(gè)新數(shù)組, 其包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素,測(cè)試未通過(guò)的元素會(huì)自動(dòng)剔除 // 如果一級(jí)路由的 permission 含有當(dāng)前角色的 roleType if (item.permission.includes(roleType)) { // 如果該一級(jí)路由含有子路由時(shí),遞歸調(diào)用該函數(shù)判斷子路由是否有權(quán)限 if (Array.isArray(item.children) && item.children.length > 0) { // 遞歸調(diào)用該函數(shù),最后接受校驗(yàn)通過(guò)后的子路由 let newChildren = filterRouter(roleType, item.children); // 如果子路由有值,則賦值給當(dāng)前路由的 children,剔除校驗(yàn)不通過(guò)的子路由 if (newChildren.length > 0) { item.children = newChildren; } else if (newChildren.length === 0) { // 如果子路由為空,則刪除該路由的 children 屬性 delete item.children; } } // 最后返回 true, 表示該路由通過(guò)權(quán)限校驗(yàn) return true; } }) }
上述代碼通過(guò)
getInfo
接口獲取用戶(hù)權(quán)限, 通過(guò)函數(shù)filterRouter
過(guò)濾掉該角色不擁有的路由, 通過(guò)concat
方法合并routes
公共路由, 最后通過(guò)resolve
返回
文件布局如下
下圖為頁(yè)面渲染的菜單(項(xiàng)目經(jīng)理角色)
左側(cè)菜單實(shí)現(xiàn)參考鏈接: Elemnt-UI + 遞歸組件實(shí)現(xiàn)后臺(tái)管理系統(tǒng)左側(cè)菜單
前端結(jié)合后端接口請(qǐng)求實(shí)現(xiàn)動(dòng)態(tài)路由參考連接: 前端 + 接口請(qǐng)求實(shí)現(xiàn) vue 動(dòng)態(tài)路由
總結(jié)
在用戶(hù)登錄成功后從服務(wù)器獲取用戶(hù)的權(quán)限信息,在 vuex 的異步處理函數(shù)中過(guò)濾掉角色權(quán)限不存在的路由,使用 concat()
合并公共路由,最后使用 router.addRoutes(res)
動(dòng)態(tài)添加可訪(fǎng)問(wèn)的路由。這樣可以確保應(yīng)用根據(jù)用戶(hù)的權(quán)限動(dòng)態(tài)加載相應(yīng)的路由,增強(qiáng)安全性與靈活性。
- vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案
- Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁(yè)面不刷新的問(wèn)題解決辦法
- 在Vue3中實(shí)現(xiàn)動(dòng)態(tài)路由的示例代碼
- vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
- vite+vue3+tsx項(xiàng)目打包后動(dòng)態(tài)路由無(wú)法加載頁(yè)面的問(wèn)題及解決
- vue3.0基于views批量實(shí)現(xiàn)動(dòng)態(tài)路由的方法(示例代碼)
相關(guān)文章
前端vue?uni-app?cc-countdown倒計(jì)時(shí)組件使用詳解
cc-countdown是一個(gè)倒計(jì)時(shí)組件,它可以顯示剩余時(shí)間、天數(shù)、小時(shí)數(shù)、分鐘數(shù)和秒數(shù),在本文中,我們將介紹如何在uni-app中使用cc-countdown組件,需要的朋友可以參考下2023-08-08vue使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用websocket實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)推送,發(fā)布訂閱重連單點(diǎn)登錄功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12解決vue-cli中stylus無(wú)法使用的問(wèn)題方法
這篇文章主要介紹了解決vue-cli中stylus無(wú)法使用的問(wèn)題方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06一文詳細(xì)聊聊vue3的defineProps、defineEmits和defineExpose
vue3官方文檔defineProps和defineEmits都是只能在scriptsetup中使用的編譯器宏,下面這篇文章主要給大家介紹了關(guān)于vue3的defineProps、defineEmits和defineExpose的相關(guān)資料,需要的朋友可以參考下2023-02-02解決vue ui報(bào)錯(cuò)Couldn‘t parse bundle asset“C:
這篇文章主要介紹了解決vue ui報(bào)錯(cuò)Couldn‘t parse bundle asset“C:\Users\Administrator\vue_project1\dist\js\about.js“. Analyzer問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn)
本文主要介紹了vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02