请选择 进入手机版 | 继续访问电脑版

后台管理权限管理(一) 动态生成路由

[复制链接]
小小海 发表于 2020-12-31 18:12:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
动态生成路由

  说到背景管理,少不了的就是权限管理。
  说到权限控制,就会想到 vuex,  addRoutes 这两个关键词。
  下面是权限控制第一步:动态生成路由
一、vuex部分

我先说vuex部分的代码。
在src文件夹下创建store文件夹, 并创建store/modules/app.js,   store/modules/menu.js,  store/index.js这三个文件。


  • app.js
  1. // 路由和菜单的加载状态export default {  state: {      menuRouteLoaded:false    // 菜单和路由是否已经加载  },  getters: {  },  mutations: {      menuRouteLoaded(state, menuRouteLoaded){  // 改变菜单和路由的加载状态          state.menuRouteLoaded = menuRouteLoaded;      }  },  actions: {  }}
复制代码


  • menu.js
  1. // 生成导航栏菜单树export default {  state: {      navTree: [],  // 导航菜单树  },  getters: {   },  mutations: {      setNavTree(state, navTree){  // 设置导航菜单树        state.navTree = navTree;      }  },  actions: {}}
复制代码


  •  index.js
  1. import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);import menu from './modules/menu'import app from './modules/app'export default new Vuex.Store({  modules: {    app: app,    menu: menu,  },  state: {},  mutations: {},  actions: {},});
复制代码
 二、router.js文件

  1. import Vue from "vue";import VueRouter from "vue-router";import store from &#39;../store&#39;import { menuList } from &#39;../config/menu.js&#39;import { permsData } from &#39;../../static/data/permsData&#39;// 引入请求方法import { getRouters, getRoles } from "../axios/menu"Vue.use(VueRouter);// 静态路由,也可以明确为公共路由。好比登录页const routes = []const router = new VueRouter({  mode: &#39;history&#39;,  base: process.env.BASE_URL,  routes})// 路由拦截router.beforeEach((to, from, next) => {// 页面拦截,因为还没有请求数据,所以我这里token模拟了数据  var token = &#39;snfoeg239032dsf23bnfdfds3293793asd&#39;  if (to.path === &#39;/login&#39;) {    // 如果是访问登录界面,如果用户会话信息存在,代表已登录过,跳转到主页    if (token) {      next({        path: &#39;/&#39;      })    } else {      next()    }  } else {    if (!token) {      // 如果访问非登录界面,且户会话信息不存在,代表未登录,则跳转到登录界面      next({        path: &#39;/login&#39;      })    } else {      // 这里办理刷新后出现空白页的问题      // 根据vuex中是否有navTree 来判断是否为刷新页面,如果有那么是第一次登岸, 如果没有,那么就为刷新页面,需要重新执行即可。      if(store.state.menu.navTree == 0){        addDynamicMenuAndRoutes(to, from)        next(to.path)      } else {        // 不写这一步会出现死循环        next()      }      // 加载动态菜单和路由      addDynamicMenuAndRoutes(to, from)      next()    }  }  next()})/** * 加载动态菜单和路由 */function addDynamicMenuAndRoutes(to, from) {  if (store.state.app.menuRouteLoaded) {    console.log(&#39;动态菜单和路由已经存在.&#39;)    return  }  // 添加动态路由,这里的menuList你要换成你请求来的数据  let dynamicRoutes = addDynamicRoutes(menuList)  // 将静态路由和动态路由绑定在一起  handleStaticComponent(router, dynamicRoutes)  router.addRoutes(router.options.routes)  // 保存菜单树  store.commit(&#39;setNavTree&#39;, menuList)    // 保存加载状态  store.commit(&#39;menuRouteLoaded&#39;, true)  // 保存用户的操纵权限列表  store.commit(&#39;setPerms&#39;, permsData.data)}/** * 处理路由,将静态路由和动态生成得路由添加到页面 */function handleStaticComponent(router, dynamicRoutes) {  router.options.routes[1].children = router.options.routes[1].children.concat(dynamicRoutes)}/** * 添加动态路由 * @param {*} menuList 菜单列表 * @param {*} routes 递归创建的动态(菜单)路由 */function addDynamicRoutes (menuList=[], routes=[]) {  var temp = []  for (var i = 0; i < menuList.length; i++) {    if(menuList[i].children && menuList[i].children.length >= 1) {      temp = temp.concat(menuList[i].children)    }  }  if (temp.length >= 1) {    addDynamicRoutes(temp, routes)  }   for(var j=0;j  { // 路由懒加载  return (resolve) =>  require([`@/views/${view}`], resolve)}
复制代码
虽然问题办理了。但是我并不知道原理是什么,欢迎各位大佬解答。
下面是我的menuList.js,自己模拟的数据。因为我们公司后端说,让我思量一下我想要的数据格式,方便我实现的那种,他那里怎么都行。哈哈哈哈。
  1.   {    "id": 1,    "parentId": null,    "title": "组织架构",    "key": "organize",    "icon": "icon-zuzhijiagouweixuanzhong",    "type":0,    "children": [{      "id": 2,      "parentId": 0,      "title": "组织架构",      "key": "organize/OrganizeStructure",      "icon": null,      "type": 1,      "children": [{        "id": 3,        "parentId": 2,        "title": "跳转添加员工",        "key": "organize/OrganizeStructureAdd",        "icon": null,        "type": 2,      }]    }]  },
复制代码
下面是权限控制按钮的实现
https://blog.csdn.net/qq_48365272/article/details/111985796

来源:https://blog.csdn.net/qq_48365272/article/details/111954197
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )