动态路由前端控制或是后端控制

 

为什么设置动态路由

我们在开发的过程中，会有不同的人来操作系统，有admin（管理员）、superAdmin(超管)，还会有各种操作员、普通管理员。为了区别这些人员，我们会给不同的人分配不一样的角色，从而来展示不同的菜单，这个就必须要通过动态路由来实现。

前端控制

1、不用后端帮助，路由表维护在前端
2、逻辑相对比较简单，比较容易上手

后端控制

1、相对更安全一点
2、路由表维护在数据库

一、前端控制

通过路由的meta属性role来控制加载路由

具体方法是：

1、根据登录用户的账号，返回前端用户的角色

2、前端根据用户的角色，跟路由表的meta.role进行匹配

3、讲匹配到的路由形成可访问路由

具体的代码逻辑：

1、把静态路由和动态路由分别写在router.js

2、在vuex维护一个state，通过配角色来控制菜单显不显示

3、新建一个路由守卫函数，可以在main.js，也可以抽离出来一个文件

4、侧边栏的可以从vuex里面取数据来进行渲染

核心代码：

1、在router.js文件（把静态路由和动态路由分别写在router.js）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import Layout from '@/layout'

// constantRoutes  静态路由，主要是登录页、404页等不需要动态的路由

export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  }
]

// asyncRoutes 动态路由
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    alwaysShow: true, 
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      // 核心代码，可以通过配的角色来进行遍历，从而是否展示
      // 这个意思就是admin、editor这两个角色，这个菜单是可以显示
      roles: ['admin', 'editor']
    },
    children: [
      {
        path: 'page',
        component: () => import('@/vi