devbox
编程变革者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

02---vue+element+admin将本地路由修改为权限路由_vue3 静态路由 权限

作者：编程变革者 | 2024-02-04 13:54:06

赞

踩

vue3 静态路由 权限

1.修改路由导航守卫，判断何时获取路由数据，并处理获取数据的js，阻止通过网址想直接进入后台进行权限管理

路由导航守卫文件在scr/permission.js中，下面是修改好之后的代码

  1. import router from './router'
  2. import store from './store'
  3. import { Message } from 'element-ui'
  4. import NProgress from 'nprogress' // progress bar
  5. import 'nprogress/nprogress.css' // progress bar style
  6. import { getToken, getNickName } from '@/utils/auth' // get token from cookie
  7. import { resetRouter } from '@/router'
  8.  
  9.  
  10.  
  11. import getPageTitle from '@/utils/get-page-title'
  12.  
  13. NProgress.configure({ showSpinner: false }) // NProgress Configuration
  14.  
  15. const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
  16.  
  17. router.beforeEach(async(to, from, next) => {
  18.     // start progress bar
  19.     NProgress.start()
  20.  
  21.     // set page title
  22.     document.title = getPageTitle(to.meta.title)
  23.  
  24.     // determine whether the user has logged in
  25.     const hasToken = getToken() //获取登录token
  26.     const nickName = getNickName(); //获取刚才在模块页使用cookie保存的模块名称
  27.     // 判断是否有token
  28.     if (hasToken) {
  29.         // 判断当前路径是否为登录页
  30.         if (to.path === '/login') {
  31.             // 进入模块页
  32.             next({ path: '/cache' })
  33.             NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
  34.  
  35.             // 判断当前是否为根路径
  36.         } else if (to.path === '/') {
  37.             //进入模块页
  38.             next({ path: '/cache' })
  39.                 // 判断当前是否为模块页
  40.         } else if (to.path === '/cache') {
  41.             // 清除cookie保存的模块名称
  42.             await store.dispatch("user/cache");
  43.             next();
  44.             // 判断当前是否为重定项页，首页
  45.         } else if (to.path === '/dashboard') {
  46.             resetRouter() //重置路由
  47.             if (nickName == undefined) { //判断名称是否为空
  48.                 //为空直接跳回模块页
  49.                 next({ path: '/cache' });
  50.                 NProgress.done()
  51.             } else {
  52.                 // 获取路由
  53.                 const { roles } = await store.dispatch('user/getInfo')
  54.                 const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, nickName });
  55.                 //动态添加
  56.                 router.addRoutes(accessRoutes);
  57.                 next();
  58.             }
  59.             // 解决动态页面，强制刷新，路径丢失，和退出登录，重新登录，路径丢失问题
  60.         } else if (to.path != '/dashboard') {
  61.             // 先放行
  62.             next();
  63.             // 判断动态路由是否有数据，没有重新动态添加
  64.             if (store.getters.permission_routes.length == 0) {
  65.                 const { roles } = await store.dispatch('user/getInfo')
  66.                 const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, nickName });
  67.                 router.addRoutes(accessRoutes)
  68.                 next();
  69.                 // 名称为空，直接跳转到模块页面
  70.             } else if (nickName == undefined) {
  71.                 next({ path: '/cache' });
  72.                 NProgress.done()
  73.             }
  74.         } else {
  75.             const hasRoles = store.getters.roles && store.getters.roles.length > 0
  76.             if (hasRoles) {
  77.                 next()
  78.             } else {
  79.                 try {
  80.                     // get user info
  81.                     // 注意：角色必须是对象数组！例如：['admin']或，['developer'，'editor']
  82.                     const { roles } = await store.dispatch('user/getInfo')
  83.                     const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, nickName })
  84.                     router.addRoutes(accessRoutes);
  85.                     // 黑客方法，以确保addRoutes是完整的
  86.                     // 设置replace:true，这样导航就不会留下历史记录
  87.                     next({...to, replace: true })
  88.                 } catch (error) { // 获取用户信息失败，进入以下一级
  89.                     await store.dispatch('user/resetToken') // 获取用户信息失败后，就删除token
  90.                     Message.error(error || 'Has Error') // 提示相应的错误
  91.                         //next(`/login?redirect=${to.path}`) // 并跳转回登录界面，重新登录
  92.                     next('login')
  93.                     NProgress.done()
  94.                 }
  95.             }
  96.         }
  97.     } else {
  98.         /* 没有令牌*/
  99.         if (whiteList.indexOf(to.path) !== -1) {
  100.             // 在免费登录白名单中，直接进入
  101.             next()
  102.         } else {
  103.             // 其他没有访问权限的页面将被重定向到登录页面。
  104.             // next(`/login?redirect=${to.path}`)
  105.             next('/login')
  106.             NProgress.done()
  107.         }
  108.     }
  109. })
  110.  
  111. router.afterEach(() => {
  112.     // 完成进度条
  113.     NProgress.done()
  114. })

判断当前路径为/cache时删除cookie中保存的模块名称，不然通过网址进入后台管理页面时就会出现导航守卫死循环bug，其中await store.dispatch(‘user/cache’);是使用vuex中的方法，这个方法在上一篇博客01---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客中的src/store/modules/user.js文件中已经定义了，这里就不贴代码了

判断当前路径为/dashboard，并且模块名称不能为空时，获取路由数据，并动态添加进去。其中await store.dispatch(‘permission/generateRoutes’, nickName);是使用vuex中的方法，给permission.js中的generateRoutes，传递一个模块名称。

2.在src/store/modules/permission.js文件中定义generateRoutes方法

定义方法之前先将scr/router/modules中的四个路由文件里面的路由数据改为数组对象形式，因为动态路由需要数组对象形式，否则报错

 修改src/store/modules/permission.js文件

  1. import { asyncRoutes, constantRoutes } from '@/router'
  2. import Layout from '@/layout'
  3. // 引入刚才改好的四个路由文件
  4. import componentsRouter from '@/router/modules/components'
  5. import chartsRouter from '@/router/modules/charts'
  6. import tableRouter from '@/router/modules/table'
  7. import nestedRouter from '@/router/modules/nested'
  8.  
  9.  
  10. /**
  11.  * Use meta.role to determine if the current user has permission
  12.  * @param roles
  13.  * @param route
  14.  */
  15. function hasPermission(roles, route) {
  16.     if (route.meta && route.meta.roles) {
  17.         return roles.some(role => route.meta.roles.includes(role))
  18.     } else {
  19.         return true
  20.     }
  21. }
  22.  
  23. /**
  24.  * Filter asynchronous routing tables by recursion
  25.  * @param routes asyncRoutes
  26.  * @param roles
  27.  */
  28. export function filterAsyncRoutes(routes, roles) {
  29.     const res = []
  30.  
  31.     routes.forEach(route => {
  32.         const tmp = {...route }
  33.         if (hasPermission(roles, tmp)) {
  34.             if (tmp.children) {
  35.                 tmp.children = filterAsyncRoutes(tmp.children, roles)
  36.             }
  37.             res.push(tmp)
  38.         }
  39.     })
  40.  
  41.     return res
  42. }
  43.  
  44. const state = {
  45.     routes: [],
  46.     addRoutes: []
  47. }
  48.  
  49. const mutations = {
  50.     SET_ROUTES: (state, routes) => {
  51.         state.addRoutes = routes
  52.         state.routes = constantRoutes.concat(routes)
  53.     }
  54. }
  55.  
  56. // 懒加载
  57. export const loadView = (view) => {
  58.     return (resolve) => require([`@/views${view}`], resolve)
  59. }
  60.  
  61. /**
  62.  * 
  63.  * @param { * 后台查询的菜单数据拼装成路由格式的数据
  64.  * @param routes} routes 
  65.  * @param {*} data 
  66.  */
  67. export function generaMenu(routes, data) {
  68.     data.forEach(item => {
  69.         const menu = {
  70.             path: item.path === '#' ? item.menuId + '_key' : item.path,
  71.             // component: item.component === '#' ? Layout : loadView(item.component),
  72.             /**
  73.              * 因为引入的路由文件里已经做了路由懒加载，这里就直接赋值就行
  74.              * 如果是调用后台接口获取的数组对象，把下面的代码注释，上面的代码解开就可以了
  75.              */
  76.             component: item.component,
  77.             hidden: item.hidden,
  78.             children: [],
  79.             //在4.4.0中路由父节点允许name属性存在值否则出现VUE之Router命令行警告：Named Route 'Home' has a default child route 警告
  80.             name: item.component === '#' ? "" : item.name,
  81.             meta: item.meta
  82.         }
  83.         if (item.children) {
  84.             generaMenu(menu.children, item.children)
  85.         }
  86.         // 当存在单路由时要将children为空的属性删除否则无法在左侧菜单中展示独立的路由菜单
  87.         if (menu.children.length <= 0) delete menu.children
  88.         routes.push(menu)
  89.     })
  90. }
  91.  
  92. /**
  93.  * 删除子节点children 为空数组
  94.  * @param {*} data 
  95.  */
  96. export function deleteChildren(data) {
  97.     let childs = data
  98.     for (let i = childs.length; i--; i > 0) {
  99.         //if(childs[i].meta != null){
  100.         //  childs[i].meta = (childs[i].meta).replace("\"","").replace("\"","");
  101.         //}	
  102.         if (childs[i].children) {
  103.             if (childs[i].children.length) {
  104.                 deleteChildren(childs[i].children)
  105.             } else {
  106.                 delete childs[i].children
  107.             }
  108.         }
  109.     }
  110.     return data
  111. }
  112.  
  113. const actions = {
  114.     // 自己封装一个js
  115.     //这个就为刚才在导航守卫，条件判断通过后，调用的获取数据的方法
  116.     generateRoutes({ commit }, obj) {
  117.         return new Promise(resolve => {
  118.             const loadMenuData = [];
  119.             let response = [];
  120.             // 在这里可以调取后端接口，获取动态路由数组对象并把数据添加到路由
  121.             if (obj.nickName === "组件系统") {
  122.                 response = deleteChildren(componentsRouter);
  123.             } else if (obj.nickName === "图表系统") {
  124.                 response = deleteChildren(chartsRouter);
  125.             } else if (obj.nickName === "表格系统") {
  126.                 response = deleteChildren(tableRouter);
  127.             } else if (obj.nickName === "多级路由") {
  128.                 response = deleteChildren(nestedRouter);
  129.             }
  130.             Object.assign(loadMenuData, response)
  131.             const tempAsyncRoutes = Object.assign([], asyncRoutes)
  132.             generaMenu(tempAsyncRoutes, loadMenuData)
  133.             let accessedRoutes
  134.             if (obj.roles.includes('admin')) {
  135.                 accessedRoutes = tempAsyncRoutes || []
  136.             } else {
  137.                 accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, obj.roles)
  138.             }
  139.             commit('SET_ROUTES', accessedRoutes);
  140.             //抛出路由，导航守卫获取数据要使用
  141.             resolve(accessedRoutes)
  142.         })
  143.     }
  144. }
  145.  
  146. export default {
  147.     namespaced: true,
  148.     state,
  149.     mutations,
  150.     actions
  151. }

 注：因为内容太多，后面的内容在我另外的几个博客里：

01---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客

03---vue+element+admin将本地路由修改为动态路由_天尘不打野的博客-CSDN博客

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

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

  

闽ICP备14008679号