uniapp 实现无感刷新token, 适应大多数项目

不管你是用taro uni 还是vue-cli 或者 react-cli 刷新token这块一通百通本质上都一样
我之前讲了一个是在响应拦截哪里做token刷新其实这样做还是不好的,因为这样我们发起了请求, 相对来说还是在请求之前做比较好那样可以避免几次请求吧

因为在 axis 中有帮我们处理的拦截器在uniapp 中也需要我们做一个拦截器
这里直接使用uniapp插件市场找到的一个。但是其中很多我们可能用不到我就给删减了很多。

在common下创建一个 http.js
我这里的是最简的版本什么其他请求和请求日志的都删除了只留下我用到的

// 拦截器
export default {config: {baseUrl: "", // 请求域名的基础地址header: {Accept: "application/json, text/plain, */*","Content-Type": "application/x-www-form-urlencoded",},data: {},method: "POST", // 默认post请求dataType: "json" /* 如设为json，会对返回的数据做一次 JSON.parse */,responseType: "text",success() {},fail() {},complete() {},},interceptor: {request: null,response: null,},request(options) {if (!options) {options = {};}options.baseUrl = options.baseUrl || this.config.baseUrl;options.dataType = options.dataType || this.config.dataType;options.url = options.baseUrl + options.url;options.data = options.data || {};options.method = options.method || this.config.method;return new Promise((resolve, reject) => {let _config = null;options.complete = (response) => {let statusCode = response.statusCode;response.config = _config;if (this.interceptor.response) {let newResponse = this.interceptor.response(response);if (newResponse) {response = newResponse;}}if (statusCode === 200) {//成功resolve(response);} else {reject(response);}};_config = Object.assign({}, this.config, options);_config.requestId = new Date().getTime();if (this.interceptor.request) {this.interceptor.request(_config);}uni.request(_config);});},
};

然后就是在我们的 request.js中使用了
这里提一句就是一般来说 token有一个过期时间。我这里判断的是在距离过期还有一个小时内。用户操作就会刷新token重新延长12个小时(这个token存在时间不同的公司规定应该是不一样的哦)

let isRefreshing = false, requestQueue = [] // 重新执行队列
// 请求拦截http.interceptor.request = async (config) => {let _userToken = uni.getStorageSync('token')config.header['token'] = _userToken.token//无感刷新处理const nowTime = parseInt(new Date().getTime() / 1000); //过期前一个小时const expireTime = (_userToken.tokenExpiresTime || 0) > 0 ? parseInt(_userToken.tokenExpiresTime) - 3600 : 0;if (token && nowTime > expireTime) {if (!isRefreshing) { // 一次进入一个刷新tokenisRefreshing = true// 刷新token的请求方法 是基于promise 封装的一个请求方法// 我放在了 vuex中的actions中// 这里其实最好还是在写一个专门刷新token的方法const res = await store.dispatch({type: 'user/refreshToken',token: _userToken.token,freshToken: _userToken.freshToken})uni.setStorageSync('token', res.Data)requestQueue.forEach(cb => cb(token));isRefreshing = falserequestQueue = [];  // 清空请求队列}const request = new Promise(resolve => {requestQueue.push(token => {config.header["token"] = token;resolve(config);});});return request;}return config;};

这样用户就不用抱怨我在登录的时候一直操作着莫名其妙就掉线了。哈哈哈

关注我持续更新前端知识。

还有不懂的地方可以私信我哦

uniapp 实现无感刷新token, 适应大多数项目相关推荐

使用Axios进行无感刷新Token
前言本人在开发项目时,在做登录模块时,参考了oauth2,在用户认证成功后会返回给前端一些令牌相关数据.接下来,再用进行接口请求时,前端根据令牌数据进行一系列的判断,然后做出最好的选择. 举个例子: ...
实现无感刷新token我是这样做的
大家好,我是漫步,今天来分享一个登录常常遇到的难题,即登录超时时间与安全性的纠结问题. 原文: https://juejin.cn/post/6983582201690456071 前言最近在做需求 ...
Laravel6通过jwt(tymon/jwt-auth)实现API用户无感刷新TOKEN
Laravel6通过jwt实现API用户无感刷新TOKEN 1.TOKEN是什么 2.jwt是什么 3.jwt安装&配置 3.1.通过composer安装 3.2.发布配置 3.3.生成加密密 ...
Vue 无感刷新token
关于无感刷新的理解: 实现token无感刷新对于前端来说是一项非常常用的技术,其本质是为了优化用户体验,当token过期时不需要用户跳回登录页重新登录,而是当token失效时,进行拦截,发送刷新to ...
实现无感刷新 token 我是这样做的
原文: https://juejin.cn/post/6983582201690456071 前言最近在做需求的时候,涉及到登录token,产品提出一个问题:能不能让token过期时间长一点,我频繁 ...
关于无感刷新Token，我是这样子做的
本文正在参加「金石计划 . 瓜分6万现金大奖」什么是JWT JWT是全称是JSON WEB TOKEN,是一个开放标准,用于将各方数据信息作为JSON格式进行对象传递,可以对数据进行可选的数字加密, ...
token过期怎么办无感刷新token
(1)可以通过响应拦截器或者全局前置守卫强制跳转登录页 // 全局前置守卫 router.beforeEach((to, from) => {let token = sessionStorage ...
无感刷新token方法
通常,对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token.不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是1-7天的样子,token过期后 ...
微信小程序token过期后重新执行失效的请求封装（用户无感刷新token）
考虑接口时效性和安全性,后端增设了token验证,确保我们的单个token只使用一次,使用后就立即失效,但是也为了防止在实际进程中异步请求的出现,所以重新封装了请求方法. 要求是在执行某个请求时,如果 ...

uniapp 实现无感刷新token, 适应大多数项目

uniapp 实现无感刷新token, 适应大多数项目相关推荐

最新文章

热门文章