【vue】axios 请求拦截器和响应拦截器

axios官方仓库 https://github.com/axios/axios请求拦截器请求拦截器的实际应用场景在进行鉴权的时候；我们每个接口都需要携带token;难道每次我们都需要手动拼接token;这个时候拦截器就很有用了；这时候就可以用拦截器来使token自动增加import axios from 'axios'// 创建一个axios实例const request = axios.cre

顾鸟

1715人浏览 · 2020-12-27 18:31:33

顾鸟 · 2020-12-27 18:31:33 发布

更新时间：2021-10-19

axios官方仓库 https://github.com/axios/axios

请求拦截器

在进行鉴权的时候；我们每个接口都需要携带token;
难道每次我们都需要手动拼接token;
这个时候拦截器就很有用了；
这时候就可以用拦截器来使token自动增加

import axios from 'axios'
import router from "@/router";

// 请求拦截器
axios.interceptors.request.use(
  function (config) {
  	const Token = window.localStorage.getItem('Token')
  if (Token) {
    // 在请求头中添加Token
    config.headers.Token = Token
  }
  // config 是当前请求的相关配置信息对象，可以修改
  // 当这里 return config之后，才会真正发送请求
  return config
}, function (error) {
  // 请求发送失败
  return Promise.reject(error)
})

export default axios

相应拦截器

对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

import axios from 'axios'
import router from "@/router";

request.interceptors.response.use(function (response) {
  // 请求成功，处理响应数据
  return response
}, function (error) {
  // 请求失败，处理错误响应数据
  if (error.response && error.response.status === 401) {
    window.localStorage.removeItem('token')
    router.push('/login')
  }
  return Promise.reject(error)
})

export default axios