实现Token无感刷新

一句话叙述：无需手动登录的情况下刷新token信息

应用场景

多用于SSO单点登陆业务场景，刷新子域系统token

关键点

双token，SSO token && API token

SSO token

身份验证token，可使用该token获取对应子域系统的业务功能API token，有效期相对长

API token

业务功能API token，业务接口访问所需token，有效期短

封装http实例

// http.js
import axios from 'axios'

// 创建Axios实例
const instance = axios.create({
  baseUrl: '/api',
  headers: {
    Authorization: `Bearer ${getToken()}`     // getToken() 获取API token
  }
})

let promise

// 刷新API token
const refreshToken = async () => {
  if (promise) return promise
  promise = new Promise((resolve) => {
    cosnt resp = await instance.get('/refresh_token', {
      headers: {
        Authorization: `Bearer ${getRefreshToken()}`  // 获取SSO token
      },
      __isRefresh: true
    })
    resolve(resp.code === 0)
  })
  promise.finally(() => {
    promise = null
  })
  return promise
}

// 响应拦截器
instance.interceptors.response.use(async (res) => {
  if(res.headers.authorization) {
    const token = res.headers.authorization.replace('Bearer ', '')
    setToken(token)    // 更新API token
    instance.defaults.headers.Authorization = `Bearer ${token}`
  }
  if(res.headers.refreshToken) {
    const refreshToken = res.headers.refreshToken.replace('Bearer ', '')
    setRefreshToken()  // 更新OSS token
  }

  // token无感刷新
  if(res.data.code === 401 && res.config.__isRefresh) {
    const isSuccess = await refreshToken()    //刷新API token请求
    if (isSuccess) {
      res.config.headers.Authorization = `Bearer ${getToken()}`
      const resp = await instance.request(res.config)
      return resp
    } else {
      console.log('SSO token过期，重新登陆')
    }
  }

  return res.data
})