如何从零开始设计一套权限&路由鉴权体系？【系列四丶终章】

本文是路由权限系列的第四篇，也是最终篇
在请求中，我们借助统一的接口请求实例提供的拦截器，进行请求头设计和响应体预校验
axios拦截器是支持传入多个拦截器对象的，只要符合格式就ok

import Cookie from 'js-cookie'
import { frontLogout } from '@/services/user'
const respCommon = {
  onFulfilled (response, options) {
    const { message } = options
    if (response.data.code !== 0 && !response.config.hideNotify) {
      message.error(response.data.detailMsg)
    }
    return response.data
  },
  onRejected (error, options) {
    const { message } = options
    const { response } = error
    if (!response) {
      message.error('网络超时或异常，请稍后再试')
      return Promise.reject(error.toString())
    }
    if (response.status === 401) {
      frontLogout().then(() => {
        options.router.push('/login')
      })
      return Promise.reject(error)
    }
    if (response.status !== 200 && response.config.hideNotify) {
      message.error('请求失败，请重试')
    }
    return Promise.reject(error)
  }
}

const reqCommon = {
  /**
   * 发送请求之前做些什么
   * @param config axios config
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {*}
   */
  onFulfilled (config, options) {
    const { message } = options
    const { url, xsrfCookieName } = config
    if (url.indexOf('login') === -1 && xsrfCookieName && !Cookie.get(xsrfCookieName)) {
      message.warning('认证 token 已过期，请重新登录')
    }
    return config
  },
  /**
   * 请求出错时做点什么
   * @param error 错误对象
   * @param options 应用配置 包含: {router, i18n, store, message}
   * @returns {Promise<never>}
   */
  onRejected (error, options) {
    const { message } = options
    message.error(error.message)
    return Promise.reject(error)
  }
}

export default {
  request: [reqCommon], // 请求拦截
  response: [respCommon] // 响应拦截
}

这个就是根据自己需求，比如设计通用的拦截器，数据transform的拦截器，还有处理响应结构的拦截器，各类错误码的策略模式等等，这里就不再赘述了。