refreshToken前端自动续期

174 阅读1分钟

客户端登录后,将 accessToken和refreshToken 保存在客户端本地,每次访问将 accessToken 传给服务端。服务端校验 accessToken 的有效性

当accessToken过期后,后端返回过期的code的状态码。(例如70000)

前端用axios用interceptors.response.use拦截后端所有请求,并通过checkStatus方法去检查请求是否过期。 如果过期就续期后,继续请求过期的请求完成后续操作。

以下是代码示例

import axios from "axios"


function isRefreshHandle(response){
    let code = response.data.code
     //重置token的错误码
     switch(code){
        case 70000:
        case 70006:
        case 70004:
        case 70009:
        return true
        default:
        return  false
      }
}

async function refreshTokenRequset(){
   return  await axios.get('/refreshToken')
}


function useRefreshToken(refreshTokenRequset = refreshTokenRequset,isRefreshHandle = isRefreshHandle,axios = axios){
    let isRefreshing = true
    let subscribers = []
    function checkStatus(response){
        if(isRefreshHandle(response)){
            if(isRefreshing){
                refreshTokenRequset().then(()=>{
                    onAccessTokenFetched()
                    isRefreshing = true
                })
            }
            isRefreshing = false;

            return new Promise((resolve)=>{
                  addSubscriber(()=>{
                       resolve(axios(response.config))
                  })
            })
        }

    }
    
    function onAccessTokenFetched(){
        subscribers.forEach(func=>func())
        subscribers = []
    }
    function  addSubscriber(func){
       subscribers.push(func)
    }
    return checkStatus
}