axios实现无感刷新

前言

最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点，我频繁的要去登录。

• 前端：后端，你能不能把token 过期时间设置的长一点。
• 后端：可以,但是那样做不安全，你可以用更好的方法。
• 前端：什么方法?
• 后端：给你刷新token的接口，定时去刷新token
• 前端：好，让我思考一下

需求

当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。实现思路

方法一：后端返回过期时间，前端判断token过期时间,去调用刷新token接口

缺点：需要后端额外提供一个token过期时间的字段；使用了本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。　

方法二：写个定时器，定时刷新token接口

缺点：浪费资源,消耗性能,不建议采用。

方法三：在响应拦截器中拦截，判断token 返回过期后，调用刷新token接口

实现

axios的基本骨架,利用service.interceptors.response 进行拦截

import axios from 'axios';
 service.interceptors.response.use(
 (response) => {
 if (response.data.code === 409) {
 return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken })
 .then((res) => {
 const { token } = res.data;
 setToken(token);
 response.headers.Authorization = `${token}`;
 })
.catch((err) => {
 removeToken;

　　router.push('/login');

　　returnPromise.reject(err);

　　});

　}

　　returnresponse && response.data;

　　},

　　(error) => {

　　Message.error(error.response.data.msg);

　　returnPromise.reject(error);

  }

);

问题一：如何防止多次刷新token

我们通过一个变量isRefreshing 去控制是否在刷新token的状态。

import axios from 'axios'
service.interceptors.response.use(
 response => {
 if (response.data.code === 409) {
 if (!isRefreshing) {
 isRefreshing = true
 return refreshToken({ refreshToken:
 localStorage.getItem('refreshToken'), token: getToken }).then(res => {
 const { token } = res.data
 setToken(token)
 response.headers.Authorization = `${token}`
 }).catch(err => {
 removeToken
 router.push('/login')
 return Promise.reject(err)
 }).finally(() => {
 isRefreshing = false
 }) 
}

 }

　　return response && response.data

},

　　(error) => {

　　Message.error(error.response.data.msg)

　　return Promise.reject(error)

  }

)

问题二：同时发起两个或者两个以上的请求时，其他接口怎么解决

当第二个过期的请求进来，token正在刷新，我们先将这个请求存到一个数组队列中，想办法让这个请求处于等待中，一直等到刷新token后再逐个重试清空请求队列。那么如何做到让这个请求处于等待中呢？为了解决这个问题，我们得借助Promise。将请求存进队列中后，同时返回一个Promise，让这个Promise一直处于Pending状态（即不调用resolve），此时这个请求就会一直等啊等，只要我们不执行resolve，这个请求就会一直在等待。当刷新请求的接口返回来后，我们再调用resolve，逐个重试。最终代码：

import axios from 'axios'

// 是否正在刷新的标记

let isRefreshing = false

//重试队列

let requests = []

service.interceptors.response.use(

response => {

//约定code 409 token 过期

if (response.data.code === 409) {

if (!isRefreshing) {

isRefreshing = true

//调用刷新token的接口

return refreshToken({ refreshToken:

localStorage.getItem('refreshToken'), token: getToken }).then(res => {

const { token } = res.data

// 替换token

setToken(token)

response.headers.Authorization = `${token}`

}).catch(err => {

//跳到登录页

removeToken

router.push('/login')

return Promise.reject(err)

}).finally(() => {

isRefreshing = false

})

} else {

// 返回未执行 resolve 的 Promise

return new Promise(resolve => {

// 用函数形式将 resolve 存入，等待刷新后再执行

requests.push(token => {

response.headers.Authorization = `${token}`

resolve(service(response.config))

})

})

}

}

return response && response.data

},

(error) => {

Message.error(error.response.data.msg)

return Promise.reject(error)

}

)

最终代码

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

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,

})

}