简单易懂处理vue根据权限（角色）渲染动态菜单栏问题

权限对于新手真的是一言难尽。。。。接到权限的项目。。硬着头皮终于啃下来了！可喜可贺！

介绍：权限渲染动态菜单一般分为两类：1⃣️后端返回权限对应菜单列表. || 2⃣️后端不返回菜单列表，只返回用户身份（角色：普通用户或者管理员），此情况就需要前端来根据角色动态渲染菜单。

一般都为第1⃣️种情况--------此文介绍第2⃣️种：

1、登陆以后后端接口返回数据：

2、在store ---> user.js 文件下设置：

引入：

 state：

 mutation：

router    ----->  index.js：

 需要新设置：utils ---->下（根据user.js文件中引用的文件可看）：

 注意：由于vuex在刷新会数据丢失，所以在存储的时候选择sessionStorage中存储！

user.js 完整代码：you

import {
  login
} from '@/api/user'
import {
  getToken,
  setToken,
  removeToken
} from '@/utils/auth'
import {
  NAME,
  USER_TYPE,
  USER_ID,
  USER_ASYNCROUTES
} from '@/utils/mappingData'
import {
  constantRoutes,
  asyncRoutes
} from '@/router'
import router from "@/router"
// import {resetRouter} from '@/router'
export default {
  namespaced: true,
  state: {
    // 获取token
    token: getToken(),
    // 存储用户名
    name: sessionStorage.getItem(NAME),
    // 角色信息
    roles: JSON.parse(sessionStorage.getItem(USER_TYPE)) || [], // normal ?????? factory??????
    // userId: sessionStorage.getItem(USER_ID),
    // 服务器返回的菜单信息【根据不同的角色，返回的标记信息，数组里面的元素是字符串】
    routers: [],
    // 对比之后【项目中已有的异步路由，与服务器返回的标记信息进行对比最终需要展示的理由
    resultAsyncRoutes: JSON.parse(sessionStorage.getItem(USER_ASYNCROUTES)) || [],
    // userId:''
  },
  // 唯一修改state的地方
  mutations: {
    // 重置state
    // RESET_STATE:(state)=>{
    //   Object.assign(state,state)
    // },
    //存储token
    SET_TOKEN: (state, token) => {
      state.token = token
      setToken(token)
    },
    SET_NAME: (state, name) => {
      sessionStorage.setItem(NAME, name)
      state.name = name
    },
    // SET_USER_ID: (state, userId) => {
    //   sessionStorage.setItem(USER_ID, userId)
    //   state.userId = userId
    // },
    SET_ROLES: (state, level) => {
      let role
      if (level === 0) {
        role = '管理员'
      } else {
        role = '普通用户'
      }
      // sessionStorage.setRole(ROLE, role)
      // state.role = role
      state.roles.splice(0, 1)
      state.roles.push(role)
      sessionStorage.setItem(USER_TYPE, JSON.stringify([role]))
    },
    SET_RESULTSYNCROUTES: (state, asyncrouters) => {
      state.resultAsyncRoutes = asyncrouters
      sessionStorage.setItem(USER_ASYNCROUTES, JSON.stringify(asyncrouters))
      router.addRoutes(state.resultAsyncRoutes)
      console.log('router',router)
    },
  },
  actions: {
    async login({
      dispatch,
      commit
    }, userinfo) {
      try {
        const {
          username,
          password
        } = userinfo
        const res = await login({
          userName: username.trim(),
          password: password
        })

        if (res.code === 0) {
          // commit('SET_USER_ID', res.userId)
          if (res.level == 0) {
            // 将两个路由合并
            commit('SET_RESULTSYNCROUTES', constantRoutes.concat(asyncRoutes))
          } else {
            commit('SET_RESULTSYNCROUTES', constantRoutes)
          }
          commit('SET_NAME', res.name)
          commit('SET_TOKEN', res.token)
          commit('SET_ROLES', res.level)

        }
        return res
      } catch (error) {
        console.log(error)
      }
    },
    // remove token
    resetToken({
      commit
    }) {
      return new Promise(resolve => {
        removeToken()
        sessionStorage.clear()
        resolve()
      })
    }
  }
}

由于vuex数据的不持久化，在页面刷新以后，动态添加的路由会出现白屏的bug，下篇文章介绍。