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
复制代码