1.接口配置（路径：~/src/api/user.js）

 

1）获取用户信息接口（login）

返回Json数据：

 

 

2）获取用户信息（getInfo）

这里是通过本地cookie中的token去解析

 

 

 

2.导航栏（路径：~/src/router/index.js）

3.角色权限过滤（路径：~/src/store/modules/permission.js）

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {
        // accessedRoutes = asyncRoutes || []
        // 新建数组
        var arr = []
        asyncRoutes.forEach((item) => {
          if (item.hasOwnProperty('meta')) {
            if (item.meta.hasOwnProperty('roles')) {
              if (item.meta.roles.includes('admin')) {
                // 将含有admin角色路由加入新数组
                arr.push(item)
              }
            }
          }
        })
        console.log(asyncRoutes)
        accessedRoutes = arr || []
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}

注：这边加完后，菜单权限那边想要显示的菜单需要再【meta】中加上【Roles】（如下图所示）

 后续后台数据库动态使用【router.AddRoutes】加载

 

感谢：https://www.bilibili.com/video/BV1vi4y1A7pi?p=4&spm_id_from=pageDriver