根据用户的权限，展示不同的菜单页。

知识点

路由守卫（使用了前置守卫）：根据用户角色判断要添加的路由
vuex：保存动态添加的路由

难点

每次路由发生变化时都需要调用一次路由守卫，并且store中的数据会在每次刷新的时候清空，因此需要判断store中是否有添加的动态路由。
（若没有判断 则会一直添加 导致内存溢出）

根据角色判断路由
过滤动态路由 判断每条路由角色是否与登录传入的角色一致

<template>
  <div>
    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo menu_wrap"
      background-color="#324057"
      text-color="white"
      active-text-color="#20a0ff"
      :collapse="isCollapse"
      unique-opened
      router
    >
      <el-submenu
        v-for="item in $store.state.Routers"
        :key="item.path"
        :index="item.path"
        v-if="!item.hidden"
      >
        <template slot="title" >
          <i class="el-icon-location"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <div v-for="chi in item.children" :key="chi.name">
          <el-menu-item v-if="!chi.hidden" :index="item.path + '/' + chi.path">
            <i class="el-icon-location"></i>{{ chi.meta.title }}
          </el-menu-item>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "MenuList",
  data() {
    return {
      isCollapse: false,
    };
  },
  created() {
    this.$bus.$on("getColl", (data) => {
      this.isCollapse = data;
    });
  },
  methods: {

  }
};
</script>

<style scoped>
.menu_wrap {
  height: 100vh;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  height: 100vh;
}
</style>

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '../store/index'

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export const routes = [
  {
    path: '/home',
    name: 'First',
    component: () => import('../views/Index.vue'),
    meta: { title: 'Home'},
    children: [
      {
        path: 'index',
        name: 'Home',
        component: () => import('../views/Home'),
        meta: { title: 'Home', roles: ['Customer'] }
      }
    ]
  },
  {
    path: '/index',
    name: 'NavigationOne',
    component: () => import('../views/Index.vue'),
    meta: { title: '导航一'},
    children: [
      {
        path: 'personnel',
        name: 'Personnel ',
        component: () => import('../views/One/Personnel.vue'),
        meta: { title: 'Personnel', roles: ['Customer'] }
      },
      {
        path: 'account',
        name: 'Account',
        component: () => import('../views/One/Account.vue'),
        meta: { title: 'Account', roles: ['Customer'] }
      },
      {
        path: 'psw',
        name: 'psw',
        component: () => import('../views/One/Password.vue'),
        meta: { title: 'psw', roles: ['Customer'] }
      }
    ]
  },
  {
    path: '/card',
    name: 'NavigationTwo',
    component: () => import('../views/Index.vue'),
    meta: { title: '导航二'},
    children: [
      {
        path: 'activity',
        name: 'Activity ',
        component: () => import('../views/Three/Activity.vue'),
        meta: { title: 'Activity', roles: ['Customer'] }
      },
      {
        path: 'Social',
        name: 'Social',
        component: () => import('../views/Three/Social.vue'),
        meta: { title: 'Social', roles: ['Customer'] }
      },
      {
        path: 'content',
        name: 'Content',
        component: () => import('../views/Three/Content.vue'),
        meta: { title: 'Content', roles: ['Customer'] }
      }
    ]
  },
  {
    path: '/two',
    name: 'NavigationThree',
    component: () => import('../views/Index.vue'),
    meta: { title: '导航三'},
    children: [
      {
        path: 'index',
        name: 'Two ',
        component: () => import('../views/Two'),
        meta: { title: 'Two', roles: ['Customer'] }
      }]
  },
  {
    path: '/404',
    name: 'Error',
    hidden: true,
    meta: { title: 'error'},
    component: () => import('../views/Error')
  }
]

export const asyncRouter = [
  // Agent3 Staff2
  {
    path: '/agent',
    component: () => import('../views/Index.vue'),
    name: 'Agent',
    meta: { title: 'Agent', roles: ['Agent','Staff']},
    children: [
      {
        path: 'one',
        name: 'agentOne',
        component: () => import('@/views/agent/One'),
        meta: { title: 'agentOne', roles: ['Agent','Staff']  }
      },
      {
        path: 'two',
        name: 'agentTwo',
        component: () => import('@/views/agent/Two'),
        meta: { title: 'agentTwo', roles: ['Agent']  }
      },
      {
        path: 'three',
        name: 'agentThree',
        component: () => import('@/views/agent/Three'),
        meta: { title: 'agentThree', roles: ['Agent','Staff']  }
      }
    ]
  },
  // Staff3
  {
    path: '/staff',
    component: () => import('../views/Index.vue'),
    name: 'Staff',
    meta: { title: 'Staff', roles: ['Staff']},
    children: [
      {
        path: 'one',
        name: 'StaffOne',
        component: () => import('@/views/Staff/One'),
        meta: { title: 'StaffOne', roles: ['Staff']  }
      },
      {
        path: 'two',
        name: 'StaffTwo',
        component: () => import('@/views/Staff/Two'),
        meta: { title: 'StaffTwo', roles: ['Staff']  }
      },
      {
        path: 'three',
        name: 'StaffThree',
        component: () => import('@/views/Staff/Three'),
        meta: { title: 'StaffThree', roles: ['Staff']  }
      }
    ]
  },
  { path: '*', redirect: '/404', hidden: true }
]

const router = new VueRouter({
  routes
})


router.beforeEach((to, from, next) =>{
  let roles = ['Staff']
  if(store.state.Routers.length) {
    console.log('yes')
    next()
  } else {
    console.log('not')
    store.dispatch('asyncGetRouter', {roles})
    .then(res =>{
      router.addRoutes(store.state.addRouters)
    })
    next({...to})
    // next()与next({ ...to })的区别：next() 放行   next('/XXX') 无限拦截
  }
})

export default router

import Vue from 'vue'
import Vuex from 'vuex'
import modules from './module'

import router, {routes, asyncRouter} from '../router'

function hasPermission(route, roles) {
  if(route.meta && route.meta.roles) {
    return roles.some(role =>route.meta.roles.indexOf(role) >= 0)
  } else {
    return true
  }
  
}

/*
  递归过滤异步路由表 返回符合用户角色的路由
  @param asyncRouter 异步路由
  @param roles 用户角色
*/
function filterAsyncRouter(asyncRouter, roles) {
  let filterRouter = asyncRouter.filter(route =>{
    if(hasPermission(route, roles)) {
      if(route.children && route.children.length) {
          route.children = filterAsyncRouter(route.children, roles)
      }
      return true 
    }
    return false
  })
  return filterRouter
}

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    addRouters:  [],
    Routers: []
  },
  mutations: {
    getRouter(state, paload) {
      // console.log(paload)
      state.Routers = routes.concat(paload)
      state.addRouters = paload
      // router.addRoutes(paload)
    }
  },
  actions: {
    asyncGetRouter({ commit }, data) {
      const { roles } = data
      return new Promise(resolve =>{
        let addAsyncRouters = filterAsyncRouter(asyncRouter, roles)
        commit('getRouter', addAsyncRouters)
        resolve()
      })
    }
  }
})

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS函数式编程是什么，有哪些基础知识

  盲猜一个：如果你有看过《medium 五万赞好文-《我永远不懂 JS 闭包》》你一定会对 JS 的【函数】有更多兴趣！皮一下，很舒服~ 没错！JS 就是轻量级的函数式编程！拆解一下这句话，品味一下~本瓜将借助《JavaScript 轻量级函数式编程》一书带领你先透析它的落脚点函数式编程，然后再看看 JS 为什么被称为是

• 如何用JS、CSS和HTML制作一个完整功能的注册页面

  这篇文章主要为大家详细介绍了JS、CSS和HTML实现注册页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Node.js中的Buffer怎么创建，写法是怎样的

  本篇文章带大家深入了解下Node.js中的 Buffer（缓冲区），介绍一下创建 Buffer 类的多种方式、写入缓冲区的方法等，希望对大家有所帮助！

• 汇总JS中有哪些另类的写法，代码是什么

  JavaScript 装逼指南(js另类写法),下面就是具体的写法，建议大家逐个测试一下，加深印象

• 用JS+CSS实现卡片轮播的具体代码是什么

  本文实例为大家分享了js+css实现卡片轮播图效果的具体代码，供大家参考，具体内容如下实现点击的时候切换卡片，自动轮播，鼠标移入暂停，移出继续轮播,有动画事件。效果如下。