401问题-响应拦截器

401错误的场景

有如下两种情况会出现401错误：

1. 未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。
2. 登录用户的token过期了

整体目标是：通过axios响应拦截器来处理401问题。

理解token过期

登陆成功之后，接口会返回一个token值，这个值在后续请求时通过请求头时带上（就像是开门钥匙）。但是，这个值一般会有有效期（具体是多长，是由后端决定），在我们的项目中，这个有效期是2小时。

如果你上午8点登陆成功，到了10：01分，则token就会失效，再去发请求时，就会报401错误。

refresh_token和token的作用

当用户登陆成功之后，返回的token中有两个值，说明如下：

• token:
  • 作用：在访问一些接口时，需要传入token，就是它。
  • 有效期：2小时（安全）。
• refresh_token
  • 作用: 当token的有效期过了之后，可以使用它去请求一个特殊接口（这个接口也是后端指定的，明确需要传入refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的那个token。
  • 有效期：14天。（最理想的情况下，一次登陆可以持续14天。）

401问题-思路-响应拦截器

让用户对因token过期产生的401错误无感知

/* eslint-disable camelcase */
// 封装axios
import { Toast } from 'antd-mobile'
import axios from 'axios'
import { getToken, hasToken } from './storage'
import history from './hisrory'
import store from '@/store'
import { logout, saveToken } from '@/store/actions/login'
const baseURL = 'http://geek.itheima.net/v1_0/'
const instance = axios.create({
  baseURL,
  timeout: 5000
})

// 添加请求拦截器
instance.interceptors.request.use(
  function (config) {
    // console.log(config, 123456)

    if (hasToken()) {
      const token = getToken().token
      // console.log(token)
      config.headers!.Authorization = `Bearer ${token}`
    }
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response
  },
  async function (error) {
    // 对响应错误做点什么
    if (!error.response) {
      Toast.show('网络异常')
      return Promise.reject(error)
    }
    if (error.response.status !== 401) {
      Toast.show('后端错误')
      return Promise.reject(error)
    }
    // 从getToken中结构refresh_token
    const { refresh_token } = getToken()
    // 如果没有refresh_token，直接返回登录页
    if (!refresh_token) {
      console.log('401 token错误 且没有refresh_token----响应拦截器')
      history.push('/login')
      Toast.show('登录信息过期')
      return Promise.reject(error)
    }
    // 报错401 且有refresh_token 使用refresh_token 请求一个新的token
    try {
      const res = await axios.put(`${baseURL}authorizations`, null, {
        headers: {
          Authorization: `Bearer ${refresh_token}`
        }
      })
      console.log(res, 'newToken')
      store.dispatch(saveToken({ token: res.data.data.token, refresh_token }))
      // 重新发请求
      return instance(error.config)
    } catch (e) {
      history.replace('/login', { from: history.location.pathname })
      store.dispatch(saveToken({ token: '', refresh_token: '' }))
      return Promise.reject(e)
    }
  }
)

export default instance