axios如何利用promise无痛刷新token的实现方法_前端如何判断token过期资源-CSDN文库

版权申诉

133 浏览量 2020-12-08 19:50:47 上传评论收藏 81KB PDF 举报

资源推荐

资源详情

资源评论

axios如何利用如何利用promise无痛刷新无痛刷新token的实现方法的实现方法

需求需求

最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要

做到无痛刷新token，即请求刷新token时要做到用户无感知。

需求解析需求解析

当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请

求。

这个问题的难点在于：当同时发起多个请求，而刷新token的接口还没返回，此时其他请求该如何处理？接下来会循序渐进地

分享一下整个过程。

实现思路实现思路

由于后端返回了token的有效时间，可以有两种方法：

方法一：

在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

方法二：

不在请求前拦截，而是拦截返回后的数据。先发起请求，接口返回过期后，先刷新token，再进行一次重试。

两种方法对比两种方法对比

方法一

优点：在请求前拦截，能节省请求，省流量。

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

间慢时，拦截会失败。

PS：token有效时间建议是时间段，类似缓存的MaxAge，而不要是绝对时间。当服务器和本地时间不一致时，绝对时间会有

问题。

方法二

优点：不需额外的token过期字段，不需判断时间。

缺点：会消耗多一次请求，耗流量。

综上，方法一和二优缺点是互补的，方法一有校验失败的风险（本地时间被篡改时，当然一般没有用户闲的蛋疼去改本地时间

的啦），方法二更简单粗暴，等知道服务器已经过期了再重试一次，只是会耗多一个请求。

在这里博主选择了方法二。

实现实现

这里会使用axios来实现，方法一是请求前拦截，所以会使用axios.interceptors.request.use()这个方法；

而方法二是请求后拦截，所以会使用axios.interceptors.response.use()方法。

封装封装axios基本骨架基本骨架

首先说明一下，项目中的token是存在localStorage中的。request.js基本骨架:

import axios from 'axios'

// 从localStorage中获取token

function getLocalToken () {

const token = window.localStorage.getItem('token')

return token

}

// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中

instance.setToken = (token) => {

instance.defaults.headers['X-Token'] = token

window.localStorage.setItem('token', token)

}

// 创建一个axios实例

const instance = axios.create({

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

版权申诉

weixin_38598213

粉丝: 2
资源: 854

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip