基于vue-admin-template的角色权限动态路由实现

vue-admin-template框架的概要

vue-template-admin是一个后台管理系统的前端解决方案，它是基于vue和element-ui实现。vue-element-admin是vue-template-admin的专业版，它含有丰富的组件。因此，根据业务逻辑在vue-template-admin进行二次开发，把vue-element-admin当成一个组件仓库，项目中需要用到相应的组件再进行加入。

角色权限动态路由的实现步骤

1. 设置路由表

先找到/src/router.js的文件，框架原本只实现了一个静态路由表，这个用来设置没有权限要求的页面，每个角色均可访问，比如首页，登录页等页面。因此，还需要加入一个动态路由表，即根据用户角色放行相应页面的权限，下面是实现的具体代码。

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../views/layout/Layout'
//使用router组件
Vue.use(Router)
//静态路由表设置
export const constantRouterMap = [
  //登录页面
  {
   
   
    path: '/login',
    component: () => import('@/views/login/index'), 
    hidden: true
  },
  //404页面
  {
   
   
    path: '/404',
    component: () => import('@/views/404'), 
    hidden: true
  },
  //注册页面
  {
   
   
    path: '/register',
    component: () => import('@/views/register/index'),
    hidden: true
  },
  //首页
  {
   
   
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    children: [{
   
   
      path: 'dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: {
   
    title: '首页', icon: 'dashboard' }
    }]
  },

]

//异步挂载的路由
//动态需要根据权限加载的路由表
//每个页面给哪些角色放行，在roles数组提前写好即可
export const asyncRoutes = [
  //用户设置
  {
   
   
    path: '/user',
    component: Layout,
    redirect: '/user/usermanagement',
    name: 'User',
    meta: {
   
   
      title: '用户管理',
      icon: 'list',
      roles: ['admin']
    },
    children: [
      {
   
   
        path: 'usermanagement',
        name: 'Usermanagement',
        component: () => import('@/views/user/usermanagement/index'),
        meta: {
   
   
          title: '用户管理',
          icon: 'list',
          roles: ['admin']
        }
      },
      {
   
   
        path: 'rolemanagement',
        name: 'Rolemanagement',
        component: () => import('@/views/user/rolemanagement/index'),
        meta: {
   
   
          title: '角色设置',
          icon: 'list',
          roles: ['admin']
        }
      },
    ]
  },
  //建议管理
  {
   
   
    path: '/advice',
    component: Layout,
    redirect: '/advice/listadvice',
    name: 'Advice',
    meta: {
   
   
      title: '建议管理',
      icon: 'icon',
      roles: ['admin', 'rm', 'rc', 'sm', 'sc']
    },
    children: [
      {
   
   
        path: 'listadvice',
        name: 'Listadvice',
        component: () => import('@/views/advice/listadvice/index'),
        meta: {
   
   
          title: '建议列表',
          icon: 'icon',
          roles: ['admin']
        }
      },
      {
   
   
        path: 'saveadvice',
        name: 'Saveadvice',
        component: () => import('@/views/advice/saveadvice/index'),
        meta: {
   
   
          title: '新增建议',
          icon: 'icon',
          roles: ['admin', 'rm', 'rc', 'sm', 'sc']
        }
      },
    ]
  },
  //档案管理
  {
   
   
    path: '/record',
    component: Layout,
    redirect: '/record/listrecord',
    name: 'Record',
    meta: {
   
   
      title: '档案管理',
      icon: 'example',
      roles: ['admin', 'rm', 'rc']
    },
    children: [
      {
   
   
        path: 'allrecord',
        name: 'Allrecord',
        component: () => import('@/views/record/allrecord/index'),
        meta: {
   
   
          title: '所有档案',
          icon: 'example',
          roles: ['admin']
        }
      },
      {
   
   
        path: 'listrecord',