后台管理权限管理（一） 动态生成路由

动态生成路由

  说到背景管理，少不了的就是权限管理。
  说到权限控制，就会想到 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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！