devopsapp/src/store/index.js

import Vuex from 'vuex'
import Vue from 'vue'

import { asyncRoutes, constantRoutes } from '@/router'
import { getAuthedUser, setAuthedUser } from '@/utils/auth'

Vue.use(Vuex)
const store = new Vuex.Store({
  /* modules: {
    user
  },*/
  getters: {
    // 用户登入状态
    roles: state => state.roles,
    routes: state => state.routes,
    addRoutes: state => state.addRoutes,
    // websocket 连接状态
    socketStatus: state => state.socketStatus
  },
  state: {
    userInfo: null,
    roles: [],
    routes: [],
    addRoutes: [],
    socketStatus: 'Offline'
  },
  mutations: {
    SET_ROUTES: (state, routes) => {
      state.addRoutes = routes
      state.routes = constantRoutes.concat(routes) // 组合路由,将原始路由和权限路由组合生成路由表
    },
    // 更新socket 连接状态
    UPDATE_SOCKET_STATUS(state, status) {
      state.socketStatus = status
    },
    // 更新用户信息
    SET_USER_INFO(state, userInfo) {
      // 保存用户信息到缓存
      setAuthedUser(userInfo)
      state.userInfo = userInfo
      // state.roles = userInfo.roles
    },
    SET_ROLES(state, roles) {
      state.roles = roles
    },
    // 用户退出登入
    USER_LOGOUT(state) {
      state.userInfo = null
      state.roles = []
    }
  },
  // 异步操作
  actions: {
    // 这里就是获取 权限路由 参数roles即是用户信息中返回的roles
    generateRoutes({ commit }, roles) {
      return new Promise(resolve => {
        roles.then(roles => {
          const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
          // 更改state
          commit('SET_ROUTES', accessedRoutes)
          resolve(accessedRoutes) // 返回 生成的权限路由表
        })
      })
    },
    getUserRoles({ commit }) {
      /* const { roles, userId, avatarUrl, username } = getAuthedUser()
      commit('SET_ROLES', roles)
      return roles*/
      return new Promise((resolve, reject) => {
        const { roles, userId, avatarUrl, username } = getAuthedUser()
        commit('SET_ROLES', roles)
        resolve(roles)
      })
    }
  }
})

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

// 判断在 meta 中定义的 roles 是否包含用户角色返回的 roles
function filterAsyncRoutes(routes, roles) {
  const res = []
  // 循环定义的asyncRoutes权限的路由表
  for (const route of routes) {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) { // 如果有子项 进行递归过滤
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      // 如果定义的mate中roles包含用户roles中的某一项 则添加到res中
      res.push(tmp)
    }
  }
  return res
}

export default store