[JavaScript知识库]vue实现动态路由：根据用户权限，给用户动态添加其有权限访问的路由。菜单控制【用户权限三】

1、登录成功后，后端需要返回的数据格式

{
    "code": 100,
    "msg": "登录成功",
    "role": 1,
    "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NjYzODg3LCJlbWFpbCI6IiJ9.PXBahru1kjfWxT9EITieiV72SVTkABZgCanEc1IjQoA",
    "data": {
        "username": "admin",
        "icon": "/media/icon/avatar09.jpg/",
        "get_position": "系统管理员",
        "role": 1
    },
    "right": [
        {
            "id": 1,
            "authName": "用户管理",
            "icon": "el-icon-user-solid",
            "children": [
                {
                    "id": 1,
                    "authName": "创建用户",
                    "path": "createuser",
                    "right": "add",
                    "component": "createuser"
                }
            ]
        },
        {
            "id": 2,
            "authName": "部门管理",
            "icon": "el-icon-user-solid",
            "children": [
                {
                    "id": 2,
                    "authName": "创建部门",
                    "path": "createpart",
                    "right": "add",
                    "component": "createpart"
                }
            ]
        },
        
    ]
}

2、将数据存储到vuex中【这里就不多余说了】

https://mp.csdn.net/mp_blog/creation/editor/123194989https://mp.csdn.net/mp_blog/creation/editor/1231949893、到router下的index.js中配置添加路由的函数

//写路由规则
import store from '@/store'
Vue.use(VueRouter)
//管理员的路由
const createuser = {
  path: 'createuser',
  component: CreateUserView
}
const createpart = {
  path: 'createpart',
  component: CreatePartView
}


//新建一个字典，名字与路由规则对应。
//在后端给的数据中，path就是这个字段的key

//字符串与路由规则对应关系
const ruleMapping={
  'createuser':createuser,
  'createpart':createpart
}

//路由的格式
const routes = [
  {
    path: '/',
    name: 'log',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView

  },
  {
    path: '/home',
    name: 'home',
    component: HomeView,
    redirect: '/home/showhome',
    children: [
      {
        path: 'showhome',
        component: ShowHomeView
      }
    ]
  },
  {
    path: '*',
    name: 'notfound',
    component: NotFound
  }
]


//实现添加路由的函数
//创建一个函数，将用户权限对应的路由添加进来
export function initRoutes () {
  //根据二级路由，将路由添加进来
  console.log(router) //查看路由器结构
  const currentRoutes = router.options.routes
  //找到home下的children位置，将路由push进来
  //用户的权限数据我们是保存到vuex中了,
  const rightList=store.state.rightList
  //遍历一级菜单
  rightList.forEach(item=>{
    //遍历二级菜单
    item.children.forEach(item=>{
      const temp = ruleMapping[item.path]
        //给路由的元数据设置上用户对于路由的权限【add、view、delete、edit】
        temp.meta=item.right
      currentRoutes[2].children.push(temp)

    })
  })
  //将路由添加进来
  router.addRoutes(currentRoutes)
}

4、登录组件login下

  //从router下index.js中按需导入方法，该方法实现添加路由
  import {initRoutes} from '@/router'


   //到登录函数中
   methods{

    Login(){

        //如果登录成功
            sessionStorage.setItem('oatoken', res.data.token)
            //调用store中的方法setRightList,后面是传递的数据
            this.$store.commit('setRightList', res.data.right)
            this.$store.commit('setUsername',res.data.data.username)
            this.$store.commit('setIcon',res.data.data.icon)
            this.$message({
              message: '登录成功，欢迎。',
              type: 'success'
            })
            //调用store中的index.js的方法，push路由
            initRoutes()
        
        }
}

5、解决页面刷新，动态添加的路由失效

? ? ? ? 问题产生的原因：因为路由配置在一开始的时候，只有基本的路由，没有登录用户的路由。

? ? ? ? 动态添加以后，配置中就有了路由。但是一旦刷新，路由配置就会回到一开始的状态。

我们可以在根组件APP.vue中，在created生命周期函数中调用动态添加路由的函数。

 import { initRoutes } from '@/router'


   created () {

      //调用路由的导入的函数，页面一刷新会重新调用动态添加路由的函数
      initRoutes()
    },

? ? ? ??