vue-element-admin權限配置

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