store下的 moudles 下的 permssion.js文件主要是对路由规则的生成进行解释-526互联

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

/**
 * Use meta.role to determine if the current user has permission
 * @param roles
 * @param route
 */
function hasPermission(roles, route) {
  // 如果 route.meta 规则中有meta  meta中有roles选项
  if (route.meta && route.meta.roles) {
    // 看一下， ['editor']有没有在meta:{roles:['editor']}中
    // 如果在 就返回true 如果不在就返回 false
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    // 如果meta中没有roles选项 返回true
    return true
  }
}

/**
 * Filter asynchronous routing tables by recursion
 * @param routes asyncRoutes
 * @param roles
 */

// routes 是所有的路由规则 roles是当前角色
export function filterAsyncRoutes(routes, roles) {
  const res = []

  // 遍历所有的动态路由规则  route是每一个规则
  routes.forEach(route => {
    // 把每一个规则使用 临时变量tmp存储
    const tmp = { ...route }
    // hasPermission（['editor'],{path,component,meta:{roles:['editor']}}）:boolean
    if (hasPermission(roles, tmp)) {
      // 如果有children 就递归的计算
      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// 计算出来需要权限访问的路由规则
//       // 如果是admin用户 把所有的动态路由赋值给accessedRoutes
//       if (roles.includes('admin')) {
//         // 也就是说admin 可以访问所有的动态路由 不需要去计算可访问的动态路由
//         accessedRoutes = asyncRoutes || []
//       } else {
//         // 用户不是admin filterAsyncRoutes 就是去计算当前用户可以访问哪些动态路由
//         // asyncRoutes 所有路由 和当前角色
//         accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
//       }
//       commit('SET_ROUTES', accessedRoutes)
//       resolve(accessedRoutes)
//     })
//   }
// }
const actions = {
  // 计算生成需要权限访问的动态路由规则
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes// 计算出来需要权限访问的路由规则
      // 如果是admin用户 把所有的动态路由赋值给accessedRoutes
      // eslint-disable-next-line prefer-const
      accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}
526互联

store下的 moudles 下的 permssion.js文件 主要是对路由规则的生成进行解释

store下的 moudles 下的 permssion.js文件主要是对路由规则的生成进行解释
