devbox
思考机器3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-element-admin动态路由权限、菜单_vue动态路由导航菜单权限管理

作者：思考机器3 | 2024-02-04 14:13:48

赞

踩

vue动态路由导航菜单权限管理

前言

首先我对于vue和语法糖不熟练，使用的应该是vue3，但具体并不明白vue2和vue3的区别；在此分享我的package.json

  1. {
  2.   "name": "vue3_cli_default",
  3.   "version": "0.0.0",
  4.   "scripts": {
  5.     "dev": "vite",
  6.     "build": "vite build",
  7.     "serve": "vite preview"
  8.   },
  9.   "dependencies": {
  10.     "2": "^3.0.0",
  11.     "axios": "^1.3.2",
  12.     "element-plus": "^2.2.29",
  13.     "fast-glob": "^3.2.12",
  14.     "qs": "^6.11.0",
  15.     "vue": "^3.2.8",
  16.     "vue-router": "^4.1.6",
  17.     "vue-wechat-title": "^2.0.7",
  18.     "vuex": "^4.0.2"
  19.   },
  20.   "devDependencies": {
  21.     "@vitejs/plugin-vue": "^1.6.0",
  22.     "@vue/compiler-sfc": "^3.2.6",
  23.     "vite": "^2.5.2",
  24.     "vite-plugin-svg-icons": "^2.0.1"
  25.   }
  26. }

1、router/index.js

在此配置不需要验证的路由：如login、404；将不需要验证的路由放在constRouter中

  1. import {
  2.     createRouter,
  3.     createWebHashHistory
  4. } from 'vue-router' //引入vue-router
  5.  
  6. import store from '../store/index.js'
  7.  
  8. // 通用页面，这里的配置不需要权限
  9. export const constRouter = [{
  10.     path: '/login',
  11.     name: 'login',
  12.     component: () =>
  13.         import ('@/views/login/index.vue'),
  14.     meta: {
  15.         title: '登录'
  16.     }
  17. }, {
  18.     path: '/404',
  19.     name: '404',
  20.     component: () =>
  21.         import ('../views/error/404.vue'),
  22.     meta: { title: "404" }
  23. }, {
  24.     path: '/*',
  25.     redirect: '/404'
  26. }, {
  27.     path: '/',
  28.     redirect: '/home/index', //首页
  29. }]
  30.  
  31.  
  32. const router = createRouter({
  33.     history: createWebHashHistory(),
  34.     routes: constRouter
  35. })
  36.  
  37.  
  38. export default router

2、router/permission.js

在permission.js这个文件中处理前置路由守卫的功能。

（如果文字逻辑不清晰请忽略，仅为初步的个人理解）

此时的主要逻辑为：缓存中有token等数据时-->判断store中是否有从后端调起的路由信息数据（addRoutes）-->store中addRoutes没有数据；调用store中的函数去处理从后端调起的路由信息数据

未登录时的逻辑：进入login页面；进行登录操作

输入密码后的逻辑：通过store的user.js处理从后端获取的token、动态路由数据；并进行处理操作（后续有详细代码

  1. // 路由的全局首位
  2.  
  3. // 权限控制逻辑
  4. import router from './index'
  5. import store from '../store/index'
  6.  
  7. import { ElMessage } from 'element-plus' //导入消息提示
  8. import { getUser, getRoutes } from '@/utils/auth' // 从cookie获取令牌
  9.  
  10. const whiteList = ['/login'] //排除的路径
  11.  
  12. router.beforeEach(async(to, from, next) => {
  13.     if (to.path === '/login' && !getRoutes()) {
  14.         // 没有菜单权限数据&去登录页-->路由放行
  15.         // 清空store的路由数据
  16.         await store.dispatch('permission/generateRoutes', [])
  17.         next()
  18.     } else {
  19.         // 判断用户是否已登录
  20.         const hasToken = getUser()
  21.         if (hasToken) {
  22.             try {
  23.                 if (!store.getters.user) {
  24.                     store.dispatch('user/setInfo', hasToken)
  25.                 }
  26.                 // 判断是否进行路由过滤
  27.                 if (store.getters.addRoutes.length <= 0) {
  28.                     const roles_routes_lo = getRoutes()
  29.  
  30.                     // 获取动态路由数据
  31.                     const accessRoutes = await store.dispatch('permission/generateRoutes', roles_routes_lo)
  32.                     console.log(accessRoutes, "accessRoutes-获取动态路由数据", store.getters.addRoutes)
  33.  
  34.                     // 添加这些路由至路由器
  35.                     router.addRoute(accessRoutes)
  36.  
  37.                     next({...to, replace: true })
  38.                 } else {
  39.                     // 已经进行路由过滤-->放行
  40.                     next() //继续即可
  41.                 }
  42.             } catch (error) {
  43.                 // 捕获异常-->主要是获取用户信息的异常,此处是必要的,返回数据异常极容易造成路由过滤问题,
  44.                 console.log('add permission error', error)
  45.  
  46.                 // // 出错需要重置令牌并重新登陆(令牌过期,网络错误等原因)
  47.                 await store.dispatch('user/resetToken')
  48.                 ElMessage({
  49.                     showClose: true,
  50.                     message: error || "网络错误-beforeEach",
  51.                     type: 'error',
  52.                 })
  53.                 next(`/login?redirect=${to.path}`)
  54.             }
  55.         } else {
  56.             // 用户无令牌
  57.             if (whiteList.indexOf(to.path) !== -1) {
  58.                 //白名单路由放过
  59.                 next()
  60.             } else {
  61.                 // 重定向至登录页
  62.                 next(`/login?redirect=${to.path}`)
  63.             }
  64.         }
  65.  
  66.     }
  67. })

3、main.js

在此处增加路由前置守卫文件,重点是：import './router/permission'

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. const app = createApp(App)
  5.  
  6. // router路由
  7. import router from './router/index.js'
  8. app.use(router)
  9.  
  10. // 路由标题
  11. import VueWebchatTitle from 'vue-wechat-title'
  12. app.use(VueWebchatTitle)
  13.  
  14. // elementUi
  15. import ElementPlus from 'element-plus'
  16. import 'element-plus/dist/index.css'
  17. app.use(ElementPlus)
  18.  
  19. // vux
  20. import Vuex from 'vuex'
  21. app.use(Vuex)
  22.  
  23. // // axios
  24. // import axios from 'axios'
  25. // app.use(axios)
  26.  
  27. // store
  28. import store from './store/index.js'
  29. app.use(store)
  30.  
  31. // 全局路由守卫
  32. import './router/permission'
  33.  
  34. // 导入svg图片插件,可以在页面上显示svg图片
  35. import 'virtual:svg-icons-register'
  36. import SvgIcon from './components/SvgIcon.vue'
  37. app.component('svg-icon', SvgIcon)
  38.  
  39. app.mount('#app')

4、utils/auth.js

这里处理的是获取缓存中的user、routes等信息

  1. const UserKey = 'user';
  2. const RoutesKey = 'anxinRoutes'
  3. const BtnKey = 'anxinBtn'
  4.  
  5. // 获取用户信息
  6. export function getUser() {
  7.     return JSON.parse(window.localStorage.getItem(UserKey))
  8. }
  9. // 添加用户信息
  10. export function setUser(userInfo) {
  11.     return window.localStorage.setItem(UserKey, JSON.stringify(userInfo))
  12. }
  13.  
  14. export function removeStorage(key) {
  15.     // 清除特定键值对
  16.     return window.localStorage.removeItem(key);
  17. }
  18.  
  19. // 获取菜单权限
  20. export function getRoutes() {
  21.     return JSON.parse(window.localStorage.getItem(RoutesKey))
  22. }
  23. // 添加菜单权限
  24. export function setRoutes(routes) {
  25.     return window.localStorage.setItem(RoutesKey, JSON.stringify(routes))
  26. }

5、store/index.js

  1. import { createStore } from 'vuex'
  2.  
  3. import permission from './modules/permission'
  4. import user from './modules/user'
  5.  
  6. export default createStore({
  7.     state: {},
  8.     mutations: {},
  9.     actions: {},
  10.     modules: {
  11.         permission,
  12.         user
  13.     },
  14.     // 定义全局getters 方便访问user 模块的数据
  15.     getters: {
  16.         user: state => state.user.user,
  17.         addRoutes: state => state.permission.addRoutes,//仅需要加权限设置的路由数据
  18.         roles_routes: state => state.permission.roles_routes,//所有路由数据
  19.         menuRoutes: state => state.permission.menuRoutes,//在页面中渲染显示的菜单数据
  20.     }
  21. })

6、store/modules/permission.js

在此处把路由数据处理为自己需要的数据格式，

从后端获取的路由数据：

 

我需要的数据格式为：

 store/modules/permission.js处理数据格式

  1. // 权限管理模块
  2. import { constRouter } from '@/router'
  3. import { getBtn } from '@/utils/auth'
  4.  
  5.  
  6. const state = {
  7.     roles_routes: [], //完整路由表
  8.     addRoutes: [], //用户可访问路由表
  9.     menuRoutes: [], //菜单数据
  10. }
  11.  
  12. const mutations = {
  13.     SET_ROUTES: (state, routes) => {
  14.         // routes 用户可以访问的权限
  15.         state.addRoutes = routes
  16.  
  17.         // 完整的路由表
  18.         state.roles_routes = constRouter.concat(routes)
  19.     },
  20.     SET_MENU_ROUTES: (state, routes) => {
  21.         // 菜单数据
  22.         state.menuRoutes = routes
  23.     },
  24. }
  25.  
  26. const actions = {
  27.     generateRoutes({ commit }, asyncRoutes) {
  28.         return new Promise(resolve => {
  29.             let accessedRoutes;
  30.             accessedRoutes = asyncRoutes || []
  31.  
  32.             // 需要处理路由数据，在此加函数处理
  33.             var last_routes = []
  34.             if (accessedRoutes.length != 0) {
  35.                 last_routes = arrToMenu(accessedRoutes)
  36.             }
  37.  
  38.             commit('SET_ROUTES', last_routes) //添加用户可访问的路由表
  39.             commit('SET_MENU_ROUTES', accessedRoutes) //添加菜单数据
  40.  
  41.             resolve(last_routes)
  42.         })
  43.     }
  44. }
  45.  
  46. // 处理菜单数据
  47. export function arrToMenu(routes) {
  48.     var nodes = {
  49.         path: '/',
  50.         component: eval(`() => import('../../views/layout/index.vue')`),
  51.         children: [],
  52.     }
  53.     var res = []
  54.     for (var i = 0; i < routes.length; i++) {
  55.         const row = routes[i]
  56.         var child = {}
  57.         if (!row.children) {
  58.             child = {
  59.                 path: row.path,
  60.                 name: row.name,
  61.                 component: eval(`() => import('../../views${row.path}.vue')`),
  62.                 meta: {
  63.                     title: row.name,
  64.                     icon: row.source
  65.                 },
  66.             }
  67.             res.push(child)
  68.  
  69.         } else {
  70.             for (var j = 0; j < row.children.length; j++) {
  71.                 var row_child = row.children[j]
  72.                 child = {
  73.                     path: row_child.path,
  74.                     name: row_child.name,
  75.                     component: eval(`() => import('../../views${row.path}${row_child.path}.vue')`),
  76.                     meta: {
  77.                         title: row_child.name,
  78.                         icon: row_child.source
  79.                     },
  80.                 }
  81.                 res.push(child)
  82.             }
  83.         }
  84.     }
  85.     nodes.children = res
  86.         // console.log(nodes, 'nodes')
  87.     return nodes;
  88. }
  89.  
  90. export default {
  91.     namespaced: true,
  92.     state,
  93.     mutations,
  94.     actions
  95. }

7、login.vue

  1. <template>
  2. 	<div class="login-main">
  3. 		<div class="login-box">
  4. 			<div class="login-header">
  5. 				<img src="../../assets/logo.png" class="login-logo">
  6. 			</div>
  7. 			<el-form
  8. 				ref="ruleFormRef"
  9. 				:rules="formRule"
  10. 				:model="formVal"
  11. 			>
  12. 				<el-form-item label="账号" prop="account">
  13. 					<el-input v-model="formVal.account" placeholder="请输入账号" />
  14. 				</el-form-item>
  15. 				<el-form-item label="密码" prop="password">
  16. 					<el-input v-model="formVal.password" placeholder="请输入密码" />
  17. 				</el-form-item>
  18. 				<el-form-item>
  19. 					<el-button type="primary" @click="onSumbit" :loading="loading">登录</el-button>
  20. 				</el-form-item>
  21. 			</el-form>
  22. 		</div>
  23. 	</div>
  24. </template>
  25.  
  26. <script>
  27. 	import { login,menutreeList } from '@/utils/api/user.js'
  28. 	export default{
  29. 		data(){
  30. 			return {
  31. 				formVal:{account:'',password:'',},
  32. 				formRule:{
  33. 					account: [
  34. 						{ required: true, message: '请输入账号', trigger: 'blur' },
  35. 					],
  36. 					password: [
  37. 						{ required: true, message: '请输入密码', trigger: 'blur' },
  38. 					],
  39. 				},
  40. 				loading: false, //登陆状态
  41. 			}
  42. 		},
  43. 		methods: {
  44. 			// 登录功能
  45. 			async onSumbit () {
  46. 				var _this = this
  47. 				try {
  48. 				    // 1、表单验证
  49. 				    await this.$refs.ruleFormRef.validate()
  50. 					this.loading = true
  51. 				    // 2、请求
  52. 				    const { data } = await login(_this.formVal)
  53. 					// 处理菜单栏数据
  54. 					_this.login(data)
  55. 					_this.$message.success(data.msg)
  56. 				} catch (err) {
  57. 					this.loading = false
  58. 					console.log('验证失败', err)
  59. 				}
  60. 			},
  61. 			login(data){
  62.                 // 在此处理数据
  63. 				this.$store
  64. 					.dispatch('user/login',data)
  65. 					.then(()=>{
  66. 						this.loading = true
  67. 						// 登陆成功后重定向
  68. 						this.$router.push({
  69. 							path: this.$route.query.redirect || '/'
  70. 						})
  71. 					})
  72. 					.catch(err=>{
  73. 						this.loading = true
  74. 						console.log(err)
  75. 					})
  76. 			}
  77. 		}
  78. 	}
  79. </script>
  80.  
  81. <style scoped>
  82. 	.login-main{
  83. 		width: 100vw;
  84. 		height: 100vh;
  85. 		display: flex;
  86. 		align-items: center;
  87. 		justify-content: center;
  88. 		background-image: url('../../assets/bg1.jpg');
  89. 		background-position: right bottom;
  90. 		background-repeat: no-repeat;
  91. 		background-size: cover;
  92. 	}
  93. 	.login-box{
  94. 		width: 300px;
  95. 		height: 200px;
  96. 		border-radius: 5px;
  97. 		box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
  98. 		background-color: #fff;
  99. 		display: flex;
  100. 		flex-direction: column;
  101. 		padding: 2rem;
  102. 		align-items: center;
  103. 		justify-content: center;
  104. 		
  105. 	}
  106. 	.login-header{
  107. 		padding-bottom: 20px;
  108. 	}
  109. 	.login-logo{
  110. 		width: 70px;
  111. 		height: 70px;
  112. 		border-radius: 50%;
  113. 		box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  114. 	}
  115. 	.el-button{
  116. 		width: 100%;
  117. 	}
  118. </style>

8、store/modules/user.js

在此处理登陆后获取的数据，将其存入缓存中；然后跳转页面会自动触发路由守卫

  1. import { setUser, removeStorage, setRoutes, setBtn } from '@/utils/auth'
  2.  
  3. // 村赤用户令牌和角色信息
  4. const state = {
  5.     user: {}, //用户名、token等
  6. }
  7.  
  8. const mutations = {
  9.     SET_USERINFO: (state, userInfo) => {
  10.         state.user = userInfo;
  11.     }
  12. };
  13.  
  14. const actions = {
  15.     // 用户登录
  16.     login({ commit }, userInfo) {
  17.         const { data } = userInfo;
  18.         return new Promise((resolve, reject) => {
  19.             var userInfo = {
  20.                 accessToken: data.accessToken,
  21.                 refreshToken: data.refreshToken,
  22.                 userId: data.userId
  23.             }
  24.  
  25.             // 保存状态
  26.             commit('SET_USERINFO', userInfo)
  27.  
  28.             // 写入cookie(token等、user，anxinRoles)
  29.             setUser(userInfo)
  30.             setRoutes(data.menuVoList)
  31.  
  32.             resolve()
  33.         })
  34.     },
  35.     // 获取用户角色信息
  36.     setInfo({ commit }, user) {
  37.         return new Promise((resolve) => {
  38.             commit('SET_USERINFO', user)
  39.             resolve(user)
  40.         })
  41.     },
  42.     // 重置令牌
  43.     resetToken({ commit }) {
  44.         return new Promise(resolve => {
  45.             commit('SET_USERINFO', {})
  46.             removeStorage('user')
  47.             removeStorage('anxinRoutes')
  48.             resolve()
  49.         })
  50.     }
  51. }
  52.  
  53. export default {
  54.     namespaced: true,
  55.     state,
  56.     mutations,
  57.     actions
  58. }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/58964
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号