客户端登录后,将 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
}