axios拦截器的使用

1. 新建request.js文件,导入axios

import axios from 'axios'

2. 创建一个axios的实例

const request = axios.create({
  baseURL: xxx,
  // baseURL: '项目基地址'
  timeout: 5000 // 设置5秒延时关闭请求
}) 

3. 设置请求拦截器

// request.interceptors.request.use() // 请求拦截器
request.interceptors.request.use(config => {
  
  config.headers.Authorization = `Bearer ${token}` // 设置请求头携带token
  return config 
}, error => {
  console.log(error) // 发生错误打印
  return error
})

4. 设置响应拦截器

// request.interceptors.response.use() // 响应拦截器
request.interceptors.response.use(config => {
  return config // 成功直接返回
}, error => {
  if (error.response.status === 401) { //如果发生错误,查看错误码是多少 401为权限不够,token过期
    alert('token请求超时!请重新登录!')
    // 进行操作,如删除vuex中过期用户数据等一系列操作
    router.push('/login') // 强行返回到登录页
  }
  return error
})

5. 导出axios实例

export default request

//封装完整的request.js项目文件(备不时之需)
import axios from 'axios'
import Qs from 'qs';

const request = axios.create({
  baseURL: xxx,
  // baseURL: '项目基地址'
  // withCredentials: true, // 设置允许跨域
  timeout: 5000 // 设置5秒延时关闭请求
  // transformRequest: [function (data) {  // 接口如果选择formData方式传参，使用qs很方便
       // if (data instanceof FormData) {
           // return data
       // } else {
           // data = Qs.stringify(data);
           // return data;
       // }
 // }],
}) 

request.interceptors.request.use(config => {
  
  config.headers.Authorization = `Bearer ${token}` // 设置请求头携带token
  return config 
}, error => {
  console.log(error) // 发生错误打印
  return error
})

request.interceptors.response.use(config => {
  return config // 成功直接返回
}, error => {
  if (error.response.status === 401) { //如果发生错误,查看错误码是多少 401为权限不够,token过期
    alert('token请求超时!请重新登录!')
    // 进行操作,如删除vuex中过期用户数据等一系列操作
    router.push('/login') // 强行返回到登录页
  }
  return error
})