封裝 axios 攔截器實現用戶無感刷新 access_token

這里使用axios，其中做的是請求后攔截，所以用到的是axios的響應攔截器axios.interceptors.response.use()方法。

@utils/auth.js

import Cookies from 'js-cookie'

const TOKEN_KEY = 'access_token'
const REGRESH_TOKEN_KEY = 'refresh_token'

export const getToken = () => Cookies.get(TOKEN_KEY)

export const setToken = (token, params = {}) => {
  Cookies.set(TOKEN_KEY, token, params)
}

export const setRefreshToken = (token) => {
  Cookies.set(REGRESH_TOKEN_KEY, token)
}

@request.js

import axios from 'axios'
import { getToken, setToken, getRefreshToken } from '@utils/auth'

// 刷新 access_token 的接口
const refreshToken = () => {
  return instance.post('/auth/refresh', { refresh_token: getRefreshToken() }, true)
}

// 創建 axios 實例
const instance = axios.create({
  baseURL:  process.env.GATSBY_API_URL,
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json',
  }
})

let isRefreshing = false // 標記是否正在刷新 token， 防止多次刷新token
let requests = [] // 存儲待重發請求的數組(同時發起多個請求的處理)

instance.interceptors.response.use(response => {
    return response
}, error => {
    if (!error.response) {
        return Promise.reject(error)
    }
    if (error.response.status === 401 && !error.config.url.includes('/auth/refresh')) {
        const { config } = error
        if (!isRefreshing) {
            isRefreshing = true
            return refreshToken().then(res=> {
                const { access_token } = res.data
                setToken(access_token)
                config.headers.Authorization = `Bearer ${access_token}`
                // token 刷新后將數組的方法重新執行
                requests.forEach((cb) => cb(access_token))
                requests = [] // 重新請求完清空
                return instance(config)
            }).catch(err => {
                console.log('抱歉，您的登錄狀態已失效，請重新登錄！')
                return Promise.reject(err)
            }).finally(() => {
                isRefreshing = false
            })
        } else {
            // 返回未執行 resolve 的 Promise
            return new Promise(resolve => {
                // 用函數形式將 resolve 存入，等待刷新后再執行
                requests.push(token => {
                    config.headers.Authorization = `Bearer ${token}`
                    resolve(instance(config))
                })  
            })
        }
    }
    return Promise.reject(error)
})

// 給請求頭添加 access_token
const setHeaderToken = (isNeedToken) => {
  const accessToken = isNeedToken ? getToken() : null
  if (isNeedToken) { // api 請求需要攜帶 access_token 
    if (!accessToken) { 
      console.log('不存在 access_token 則跳轉回登錄頁')
    }
    instance.defaults.headers.common.Authorization = `Bearer ${accessToken}`
  }
}

// 有些 api 並不需要用戶授權使用，則無需攜帶 access_token；默認不攜帶，需要傳則設置第三個參數為 true
export const get = (url, params = {}, isNeedToken = false) => {
  setHeaderToken(isNeedToken)
  return instance({
    method: 'get',
    url,
    params,
  })
}

export const post = (url, params = {}, isNeedToken = false) => {
  setHeaderToken(isNeedToken)
  return instance({
    method: 'post',
    url,
    data: params,
  })
}

當賬戶(access_token)過期了， 會自動觸發refresh_token，重新獲取access_token