广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue后台管理如何配置动态路由菜单
  • 915
分享到

vue后台管理如何配置动态路由菜单

2024-04-02 19:04:59 915人浏览 泡泡鱼
摘要

目录后台管理配置动态路由菜单根据权限生成动态路由及导航菜单后台管理配置动态路由菜单 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以Vue-element

后台管理配置动态路由菜单

前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以Vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死循环,终于差不多弄出了一个,可能会有点啰嗦

总结一下:

我这个后台分为三个角色:超级管理员、企业管理员和普通管理员。其中,超级管理员可以查看所有的路由菜单,企业管理员也是固定的几个菜单,所以,超级管理员和企业管理员是我在前端写好的路由菜单里直接配置的权限,而普通管理员是不固定的,需要后台给我返回数据,自己拼接。

1、首先我们需要有一个登录的页面,简单点的,用户名和密码还有一个登录按钮就可以了,我用的是vue-element-admin的模板,它已经写好了,直接拿来用就可以

2、自己在src-api文件夹中新建一个js文件来写自己的登录、获取用户信息、登出等接口(也可以换掉之前的模拟接口,在api/user.js文件)。

3、点击登录按钮,这时会在这个方法里面调用store-modules-user.js里的login方法,如下:

4、store-modules-user.js里的login方法就是调用了自己的登录接口,当然,调用之前记得先引入文件

上面是我引入的登录、获取用户信息、登出的接口

5、调用登录接口后store存储返回的token等数据(根据自己的需求来,因为我后期需要用户id,所以也把用户id存进了store里)

6、这时调用同页面的getInfo方法,当然,这个方法里也同样调用了获取用户信息的接口,这步是为了获取到登录的用户的角色,调用之后,将返回的用户角色名等存到store里(我还存了其它的数据,还是那句话,哪些数据需要就存哪些)

*** 这里当时我出了一个bug:当我登录进去之后刷新页面又跳到了登录的页面,说明有关键的数据没有存储上,上网一找,token在登录调用登录接口后已经用cookie存入了浏览器,那应该就是我只把id存进了store而没有存入浏览器,才导致一刷新就失去了id,所以我用localStorage/sessionStorage存入了id,在getInfo里才获取本地存储的id在存储到store中

 7、由于普通管理员的路由菜单是后台返给我的,所以,在getInfo这个方法中,我也直接调用了获取路由菜单的接口,将返回的数据通过拼接来生成一个完整的路由菜单,最后将这个路由菜单数组保存在store中

注:路由菜单最后一定要放404,格式 :{ path: '*', redirect: '/404', hidden: true } ,切记一定要放在最后!!!

8、接下来是去src/permission.js中调用store-modules-user.js里的getInfo方法,这块与模板的代码没有区别,所以就不多叙述。在此方法中调用了store-modules-permission.js里的generateRoutes的方法

 我们去找一下这个方法,这个方法其实是根据传过来的role来判断它能看到的路由菜单。模板里原来的方法是根据角色和写好的路由菜单一一比较,最后把对应上权限的项放进一个数组里,我这里的超级管理员和普通管理员因为权限和路由菜单固定,所以直接套用的代码。而普通管理员,则是调用保存在store里的路由菜单数组,然后赋值给定义好的变量

之后需要更改的地方就没有了,就可以测试登录了。

这里我犯了一个比较大的bug:

当以普通管理员登录的时候,我进去之后菜单显示正常,可是当我不管点击哪个菜单,都给我跳到了404 。经过一番测试与排查,我找到了解决方法,是加一个延时器,加在generateRoutes方法的这个地方

之后就运行成功了,但是具体原因我其实不太明白,因为我console.log(accessedRoutes) 出来的也是正常的路由菜单

这就是大体的配置动态路由菜单的过程,作为第一次配置成功的心得。

根据权限生成动态路由及导航菜单

最近在做一个后台管理项目,涉及到一些菜单权限控制,具体实现如下:(话不多说,直接上代码)

router/index.js

const Home = resolve => require(['@/views/common/Home.vue'], resolve);
const AAA = resolve => require(['@/views/page/AAA.vue'], resolve);
const BBB = resolve => require(['@/views/pages/BBB.vue'], resolve);
const CCC= resolve => require(['@/views/pages/CCC.vue'], resolve);
let routes = [{
    path: '/',
    component: Home,
    name: '首页',
    redirect: '/AAA',
    hidden: true,
    mate: {
      icon: 'fa fa-home',
      index: 'AAA'
    },
    children: [{
      path: '/AAA',
      component: AAA,
      name: '主页'
    }]
  }]
//从服务器获取路由,进行拼接,所有模块不再以import的形式引入,只能通过require方式加载!
export const makeRoute = function (items) {
  let routes = [];
  for (var i = 0; i < items.length; i++) {
    // console.log(items[i]);
    items[i] = fORMatRoute(items[i]);
    if (items[i].children) {
      //递归处理子路由的component
      items[i].children = makeRoute(items[i].children);
    }
  }
  return items;
}
//格式化路由,使component挂载到路由上,生成addRoutes可用的格式
const formatRoute = (item) => {
  let route = item;
  route.component = eval(route.component);
  return route;
}
export default routes;

main.js(登录成功时,后台返回有权限的路由并存在状态管理器vuex中)

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import axiOS from 'axios'
import store from './store'
import routes from './router/index'
import { makeRoute } from './router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})
router.beforeEach((to, from, next) => {
  
    //如果目标路由为登陆时,恢复用户原始状态
    if (to.path === '/login') {
      window.clearInterval(window.interval);
      store.commit('loGout');
    }
    let allRoutes = store.getters.allRoutes;
    let loginStatus = store.getters.loginStatus;
  
    //登录成功时加载路由及模块
    if (from.path === '/login' && allRoutes !== '' && loginStatus) {
      let routesObj = makeRoute(store.getters.allRoutes);
      router.addRoutes(routesObj);
    }
    //没有登录时自动跳转,开发环境免登陆时注释
    if ( to.path !== '/login' && (allRoutes === '' || !loginStatus)) {
      if(sessionStorage.getItem('userInfo') === null){  
        next({ path: '/login' })
      } else {  
        //刷新当前页面
        //重置store参数
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        store.commit('setUser', userInfo);
        if(userInfo.routes){
          //重新加载路由及模块
          let routesObj = makeRoute(userInfo.routes);
          router.addRoutes(routesObj);
        }
        next({path: to.path, query: to.query});
      }
    }else{
      //路由的next必须存在,否则无法进入下一页
      next();
    }
  })

备注:此方案最大的好处是不用再使用require引入每一个组件并挂载到路由

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue后台管理如何配置动态路由菜单

本文链接: https://www.lsjlt.com/news/144959.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue后台管理如何配置动态路由菜单
    目录后台管理配置动态路由菜单根据权限生成动态路由及导航菜单后台管理配置动态路由菜单 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element...
    99+
    2022-11-13
  • vue后台管理怎么配置动态路由菜单
    本篇内容介绍了“vue后台管理怎么配置动态路由菜单”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!后台管理配置动态路由菜单前段时间做一个后台管...
    99+
    2023-06-29
  • 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
    目录前言动态路由动态侧边菜单栏总结前言 在做Vue管理系统的时候,都会遇到的一个需求:每个用户的权限是不一样的,那么他可以访问的页面(路由),可以操作的菜单选项是不一样的,如果由后端...
    99+
    2022-11-13
  • vue如何从后台获取数据生成动态菜单列表
    目录1.数据准备2.选择组件3.配置路由4.不出问题这样就可以实现动态路由了5.完整代码1.数据准备 树形菜单基本数据很简单,只需要菜单id,菜单名称,路由地址,图标。下图中的节点i...
    99+
    2022-11-13
  • vue动态路由指的是什么该如何配置
    今天小编给大家分享一下vue动态路由指的是什么该如何配置的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在vue中,动态路由就...
    99+
    2023-06-29
  • vue如何动态添加store、路由和国际化配置方式
    这篇文章主要为大家展示了“vue如何动态添加store、路由和国际化配置方式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue如何动态添加store、路由和国际化配置方式”这篇文章吧。vue动...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作