vue 后台项目处理权限问题（后台返回路由列表，前台根据路由列表显示侧边栏）

一、首先我的项目是基于vue-element-admin搭建的。该框架会自带处理路由权限部分，不过需要后期根据个人需求来进行更改。接下来看看我的项目

1、先看我的登录页，我项目中的登录时二维码登录。登录成功后,拿到后台返回的路由列表

  initQR() {
      let timer
      getQrCodeUrl().then((res) => {
        if (!timer) {
          clearInterval(timer)
        }
        this.url = res.data
        this.sessionKey = res.SessionKey
        this.isShow = false
   
        const _this = this
        timer = setInterval(() => {
          const params = {
            sessionKey: _this.sessionKey
          }
          getLoginStatus(params).then((res) => {
           
            this.token = res.data.Token
            if (res.data && res.data.LoginStatus === 1) {
              // 清除定时器
              clearInterval(timer)

              this.$store.dispatch('user/login', res.data) //将后台返回的信息全部存放到vuex中
              this.$router.push({ path: 'dashboardsy' })
              window.localStorage.setItem('lastTime', new Date().getTime()) 
            }
          }).catch((err)=>{
                  this.isShow=true
                  clearInterval(timer)
                   this.$message.error(err.message)
          })
        }, 3000)
      }).catch((err) => {
        this.isShow = true
        this.$message.error(err.message)
      })
    },

2、在vuex中处理后台返回的路由表

import { setStatus, removeStatus, setElement, getElement, removeElement } from '@/utils/auth'
import router, { resetRouter } from '@/router'

const state = {
  name: getElement('name'),
  avatar: getElement('avatar'),
  roles: getElement('roles') === undefined ? [] : JSON.parse(getElement('roles')),
  loginStatus: getElement('loginStatus'),
  token: getElement('token'),
  rolesexistence: false, // 是否根据角色设置了路由
  menuList: getElement('menuList') === undefined ? [] : JSON.parse(getElement('menuList')) // 后台返回的路由
}

const mutations = {
  SET_LOGINSTATUS: (state, data) => {
    state.loginStatus = data
  },
  SET_TOKEN: (state, data) => {
    state.token = data
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  },
  SET_ROLESEXISTENCE: (state, rolesexistence) => {
    state.rolesexistence = rolesexistence
  },
  SET_MENULIST: (state, menuList) => {
    state.menuList = menuList
  }

}

const actions = {

  // user login1
  login({ commit }, data) {
    const menuNameList = [] // 主要代码部分
    data.RbacMenu.forEach((item) => {  // 主要代码部分
      const menuObj = JSON.parse(item) // 主要代码部分
      menuNameList.push({ menu_name: menuObj.menu_name }) // 主要代码部分
    })  // 主要代码部分
    commit('SET_MENULIST', menuNameList) // 主要代码部分
    setElement('menuList', menuNameList) // 主要代码部分

    setStatus(data.LoginStatus)
    setElement('loginStatus', data.LoginStatus)
    setElement('token', data.Token)
    setElement('name', data.UserName)
    setElement('roles', JSON.stringify(data.RbacRole))
    setElement('avatar', data.Avatar)
    commit('SET_LOGINSTATUS', data.LoginStatus)
    commit('SET_NAME', data.UserName)
    commit('SET_ROLES', data.RbacRole)
    commit('SET_AVATAR', data.Avatar)
    commit('SET_TOKEN', data.Token)
  },
  setRolesexistence({ commit }) {
    commit('SET_ROLESEXISTENCE', true)
  },

  logout1({ commit, state, dispatch }) {
    commit('SET_LOGINSTATUS', '')
    commit('SET_ROLES', [])
    commit('SET_TOKEN', '')
    commit('SET_MENULIST', [])
    removeElement('loginStatus')
    removeElement('token')
    removeElement('LoginStatus')
    removeElement('name')
    removeElement('roles')
    removeElement('avatar')
    removeElement('rolesexistence')
    removeElement('menuList')
    commit('SET_ROLESEXISTENCE', false)
    resetRouter()

    dispatch('tagsView/delAllViews', null, { root: true })
  },
  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_LOGINSTATUS', '')
      commit('SET_ROLES', [])
      commit('SET_TOKEN', '')
      removeStatus()
      removeElement('loginStatus')
      removeElement('name')
      removeElement('roles')
      removeElement('avatar')
      removeElement('rolesexistence')
      resolve()
    })
  },
  // remove loginStatus
  resetLoginStatus({ commit }) {
    return new Promise(resolve => {
      commit('SET_LOGINSTATUS', '')
      commit('SET_ROLES', [])
      commit('SET_TOKEN', '')
      removeStatus()
      removeElement('loginStatus')
      removeElement('name')
      removeElement('roles')
      removeElement('avatar')
      removeElement('rolesexistence')
      resolve()
    })
  },
  changeRoles({ commit, dispatch }, role) {
    return new Promise(async resolve => {
      const { roles } = await dispatch('getInfo')
      resetRouter()

      // 根据角色生成可访问的路线图
      const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true })

      // 动态添加可访问的路线
      router.addRoutes(accessRoutes)

      // 重置访问的视图和缓存的视图
      dispatch('tagsView/delAllViews', null, { root: true })

      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3、在路由权限文件里处理权限问题

import { asyncRoutes, constantRoutes } from '@/router'
import store from '@/store'

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    console.log(route.meta.roles.indexOf(roles) > -1, 'route.meta.roles.indexOf(roles) > -1')

    if (route.meta.roles.indexOf(roles) > -1) {
      return true
    } else {
      return false
    }
  } else {
    return true
  }
}

//以下是实现路由权限最最主要的代码
export function filterAsyncRoutes(routes, roles) {
  const res = []
  const menuList = store.state.user.menuList
  routes.forEach(route => {
    menuList.forEach((item) => {
      //   当前路由的name 和 后台返回的路由列表中的 name 一致时
      if (item.menu_name === route.name) {
        const tmp = { ...route }
        if (hasPermission(roles, tmp)) {
          if (tmp.children) {
            tmp.children = filterAsyncRoutes(tmp.children, roles)
          }
        }
        res.push(tmp)
      }
    })
       改部分代码是没有权限，所有路由全部展示的代码
    // const tmp = { ...route }
    // if (hasPermission(roles, tmp)) {
    //   if (tmp.children) {
    //     tmp.children = filterAsyncRoutes(tmp.children, roles)
    //   }
    //   res.push(tmp)
    // }
  })
  return res
}
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('统计管理员')) {
        // accessedRoutes = asyncRoutes || []
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}