feat: add interceptors for axios; 🐛

新增：axios 添加拦截器配置；

src/bootstrap.js

@@ -1,4 +1,6 @@
 import {loadRoutes, loginGuard, authorityGuard} from '@/utils/routerUtil'
+import {loadInterceptors} from '@/utils/request'
+import interceptors from '@/utils/axios-interceptors'
 
 /**
  * 启动引导方法
@@ -7,7 +9,9 @@ import {loadRoutes, loginGuard, authorityGuard} from '@/utils/routerUtil'
  * @param store 应用的 vuex.store 实例
  * @param i18n 应用的 vue-i18n 实例
  */
-function bootstrap({router, store, i18n}) {
+function bootstrap({router, store, i18n, message}) {
+  // 加载 axios 拦截器
+  loadInterceptors(interceptors, {router, store, i18n, message})
   // 加载路由
   loadRoutes({router, store, i18n})
   // 添加路由守卫

src/main.js

@@ -13,13 +13,14 @@ import bootstrap from '@/bootstrap'
 
 const router = initRouter(store.state.setting.asyncRoutes)
 const i18n = initI18n('CN', 'US')
-bootstrap({router, store, i18n})
 
+Vue.use(Antd)
 Vue.config.productionTip = false
 Vue.use(Viser)
-Vue.use(Antd)
 Vue.use(Plugins)
 
+bootstrap({router, store, i18n, message: Vue.prototype.$message})
+
 new Vue({
   router,
   store,

src/utils/axios-interceptors.js

@@ -0,0 +1,71 @@
+import Cookie from 'js-cookie'
+// 401拦截
+const resp401 = {
+  /**
+   * 响应数据之前做点什么
+   * @param response 响应对象
+   * @param options 应用配置 包含: {router, i18n, store, message}
+   * @returns {*}
+   */
+  onFulfilled(response, options) {
+    const {message} = options
+    if (response.status === 401) {
+      message.error('无此接口权限')
+    }
+    return response
+  },
+  /**
+   * 响应出错时执行
+   * @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)
+  }
+}
+
+const resp403 = {
+  onFulfilled(response, options) {
+    const {message} = options
+    if (response.status === 403) {
+      message.error(`请求被拒绝`)
+    }
+    return response
+  }
+}
+
+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: [resp401, resp403] // 响应拦截
+}

src/utils/request.js

@@ -97,11 +97,49 @@ function checkAuthorization(authType = AUTH_TYPE.BEARER) {
   return false
 }
 
+/**
+ * 加载 axios 拦截器
+ * @param interceptors
+ * @param options
+ */
+function loadInterceptors(interceptors, options) {
+  const {request, response} = interceptors
+  // 加载请求拦截器
+  request.forEach(item => {
+    let {onFulfilled, onRejected} = item
+    if (!onFulfilled || typeof onFulfilled !== 'function') {
+      onFulfilled = () => {}
+    }
+    if (!onRejected || typeof onRejected !== 'function') {
+      onRejected = () => {}
+    }
+    axios.interceptors.request.use(
+      config => onFulfilled(config, options),
+      error => onRejected(error, options)
+    )
+  })
+  // 加载响应拦截器
+  response.forEach(item => {
+    let {onFulfilled, onRejected} = item
+    if (!onFulfilled || typeof onFulfilled !== 'function') {
+      onFulfilled = () => {}
+    }
+    if (!onRejected || typeof onRejected !== 'function') {
+      onRejected = () => {}
+    }
+    axios.interceptors.response.use(
+      response => onFulfilled(response, options),
+      error => onRejected(error, options)
+    )
+  })
+}
+
 export {
   METHOD,
   AUTH_TYPE,
   request,
   setAuthorization,
   removeAuthorization,
-  checkAuthorization
+  checkAuthorization,
+  loadInterceptors
 }