请求拦截器和响应拦截器

请求拦截器作用:

发请求的时候,带上token,那么如果不需要token呢,导航守卫里面写道,如果没有token,它会跳转到登录页 

// 添加请求拦截器
// 所有的请求都会到这里来,会去执行第一个参数，同时自动传入config
axios.interceptors.request.use(function (config) {
  const tokenStr = localStorage.getItem('tokenStr')
  if (tokenStr) { // 如果本地有token,给它加上请求头
    config.headers.Authorization = `Bearer ${tokenStr}`
  }
  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

什么是响应拦截器? 就是我们在登陆之后,服务器会生成一个token,返给客户端

token具有时效性,refresh_token 是刷新token,等token过期之后,用它去换新的token

开头这个我都叫的request,这个是根据你定义axios叫啥名

const request = axios.create()

// 响应拦截器
request.interceptors.response.use(function (response) {
  console.log('响应拦截器', response)
  return response
}, function (err) {
  console.dir(err)
  return Promise.reject(err)   //抛出错误,把错误抛给谁? 谁调用它发请求就给谁
})

处理401

request.interceptors.response.use(function (response) {
  console.log('响应拦截器', response)
  return response
}, function (err) {
  console.dir(err)
if(error.response.status===401){
console.log('401错误')
}else{
return Promise.reject(error)
}
})

登录功能的响应拦截器

request.interceptors.response.use(function (response) {
  if (response.data.success) {
    return response.data   //这里我为啥返回它,看下面讲解
  } else {
    return Promise.reject(new Error(response.data.message))
  }
}, error => {
  return Promise.reject(error)
})

 上面代码我为什么返回一个response.data 而不是直接返回response

原因是axios会自动给我们再套一层.直接返回response.data就避免我们response.data.data.xxx了