refactor: config of async router and guards of router; :star2: 重构：异步路由配置和路由...

iczer

2020-08-28 d4261bc401094952df845f42c80fd4eba985d2cd

refactor: config of async router and guards of router; :star2:
重构：异步路由配置和路由守卫配置；

 src/bootstrap.js

@@ -1,5 +1,6 @@
import {loadRoutes, loginGuard, authorityGuard} from '@/utils/routerUtil'
import {loadRoutes, loadGuards} from '@/utils/routerUtil'
import {loadInterceptors} from '@/utils/request'
import guards from '@/router/guards'
import interceptors from '@/utils/axios-interceptors'

/**
@@ -14,9 +15,8 @@
  loadInterceptors(interceptors, {router, store, i18n, message})
  // 加载路由
  loadRoutes({router, store, i18n})
  // 添加路由守卫
  loginGuard(router)
  authorityGuard(router, store)
  // 加载路由守卫
  loadGuards(guards, {router, store, i18n, message})
}

export default bootstrap

 src/router/async/config.async.js

 src/router/async/router.map.js

 src/router/guards.js

New file
@@ -0,0 +1,44 @@
import {hasPermission, hasRole} from '@/utils/authority-utils'
import {loginIgnore} from '@/router/index'
import {checkAuthorization} from '@/utils/request'

/**
 * 登录守卫
 * @param to
 * @param form
 * @param next
 * @param options
 */
const loginGuard = (to, from, next, options) => {
  const {message} = options
  if (!loginIgnore.includes(to) && !checkAuthorization()) {
    message.warning('登录已失效，请重新登录')
    next({path: '/login'})
  } else {
    next()
  }
}

/**
 * 权限守卫
 * @param to
 * @param form
 * @param next
 * @param options
 */
const authorityGuard = (to, from, next, options) => {
  const {store, message} = options
  const permissions = store.getters['account/permissions']
  const roles = store.getters['account/roles']
  if (!hasPermission(to, permissions) && !hasRole(to, roles)) {
    message.warning(`对不起，您无权访问页面: ${to.fullPath}，请联系管理员`)
    next({path: '/403'})
  } else {
    next()
  }
}

export default {
  beforeEach: [loginGuard, authorityGuard],
  afterEach: []
}

 src/router/index.js

@@ -24,7 +24,7 @@
 * @returns {VueRouter}
 */
function initRouter(isAsync) {
  const options = isAsync ? require('./config.async').default : require('./config').default
  const options = isAsync ? require('./async/config.async').default : require('./config').default
  formatAuthority(options.routes)
  return new Router(options)
}

 src/utils/authority-utils.js

New file
@@ -0,0 +1,50 @@
/**
 * 判断是否有路由的权限
 * @param route 路由
 * @param permissions 用户权限集合
 * @returns {boolean|*}
 */
function hasPermission(route, permissions) {
  const authority = route.meta.authority || '*'
  let required = '*'
  if (typeof authority === 'string') {
    required = authority
  } else if (typeof authority === 'object') {
    required = authority.permission
  }
  return required === '*' || (permissions && permissions.findIndex(item => item === required || item.id === required) !== -1)
}

/**
 * 判断是否有路由需要的角色
 * @param route 路由
 * @param roles 用户角色集合
 */
function hasRole(route, roles) {
  const authority = route.meta.authority || '*'
  let required = undefined
  if (typeof authority === 'object') {
    required = authority.role
  }
  return authority === '*' || hasAnyRole(required, roles)
}

/**
 * 判断是否有需要的任意一个角色
 * @param required {String | Array[String]} 需要的角色，可以是单个角色或者一个角色数组
 * @param roles 拥有的角色
 * @returns {boolean}
 */
function hasAnyRole(required, roles) {
  if (!required) {
    return false
  } else if(Array.isArray(required)) {
    return roles.findIndex(role => {
      return required.findIndex(item => item === role || item === role.id) !== -1
    }) !== -1
  } else {
    return roles.findIndex(role => role === required || role.id === required) !== -1
  }
}

export {hasPermission, hasRole}

 src/utils/routerUtil.js

@@ -1,8 +1,6 @@
import routerMap from '@/router/router.map'
import routerMap from '@/router/async/router.map'
import {mergeI18nFromRoutes} from '@/utils/i18n'
import Router from 'vue-router'
import {loginIgnore} from '@/router'
import {checkAuthorization} from '@/utils/request'

/**
 * 根据 路由配置 和 路由组件注册 解析路由
@@ -98,86 +96,6 @@
}

/**
 * 登录守卫
 * @param router 应用路由实例
 */
function loginGuard(router) {
  router.beforeEach((to, from, next) => {
    if (!loginIgnore.includes(to) && !checkAuthorization()) {
      next({path: '/login'})
    } else {
      next()
    }
  })
}

/**
 * 权限守卫
 * @param router 应用路由实例
 * @param store 应用的 vuex.store 实例
 */
function authorityGuard(router, store) {
  router.beforeEach((to, form, next) => {
    const permissions = store.getters['account/permissions']
    const roles = store.getters['account/roles']
    if (!hasPermission(to, permissions) && !hasRole(to, roles)) {
      next({path: '/403'})
    } else {
      next()
    }
  })
}

/**
 * 判断是否有路由的权限
 * @param route 路由
 * @param permissions 用户权限集合
 * @returns {boolean|*}
 */
function hasPermission(route, permissions) {
  const authority = route.meta.authority || '*'
  let required = '*'
  if (typeof authority === 'string') {
    required = authority
  } else if (typeof authority === 'object') {
    required = authority.permission
  }
  return required === '*' || (permissions && permissions.findIndex(item => item === required || item.id === required) !== -1)
}

/**
 * 判断是否有路由需要的角色
 * @param route 路由
 * @param roles 用户角色集合
 */
function hasRole(route, roles) {
  const authority = route.meta.authority || '*'
  let required = undefined
  if (typeof authority === 'object') {
    required = authority.role
  }
  return authority === '*' || hasAnyRole(required, roles)
}

/**
 * 判断是否有需要的任意一个角色
 * @param required {String | Array[String]} 需要的角色，可以是单个角色或者一个角色数组
 * @param roles 拥有的角色
 * @returns {boolean}
 */
function hasAnyRole(required, roles) {
  if (!required) {
    return false
  } else if(Array.isArray(required)) {
    return roles.findIndex(role => {
      return required.findIndex(item => item === role || item === role.id) !== -1
    }) !== -1
  } else {
    return roles.findIndex(role => role === required || role.id === required) !== -1
  }
}

/**
 * 格式化路由的权限配置
 * @param routes
 */
@@ -222,4 +140,24 @@
  return keys.join('.')
}

export {parseRoutes, loadRoutes, loginGuard, authorityGuard, formatAuthority, getI18nKey}
/**
 * 加载导航守卫
 * @param guards
 * @param options
 */
function loadGuards(guards, options) {
  const {beforeEach, afterEach} = guards
  const {router} = options
  beforeEach.forEach(guard => {
    if (guard && typeof guard === 'function') {
      router.beforeEach((to, from, next) => guard(to, from, next, options))
    }
  })
  afterEach.forEach(guard => {
    if (guard && typeof guard === 'function') {
      router.afterEach((to, from) => guard(to, from, options))
    }
  })
}

export {parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards}