前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token
大概流程如下:
1.用户登录之后,后端会返回两个 token ,分别为accessToken 和refreshToken 存储到Storage
平时请求数据时,请求头使用accessToken 来发送接口
2.当返回401 token 过期后, 我们通过接口向后端获取新的 token ,请求参数为refreshToken
3.我们拿到新的accessToken 和refreshToken 之后, 替换掉之前的Storage 中存储的 token
4.同时还要将我们报 401 的哪个接口 ,使用新的accessToken ,重新请求一次, 拿到数据,实现无痛刷新 token
5.如果后端返回的新的 token 也无法使用,表明需要重新登录,跳到登录页(这一步可以灵活使用,我个人用的是一个路由插件配合使用的: https://ext.dcloud.net.cn/plugin?id=578)
配合uni-app的插件进行使用和实现:
到uni-app的插件市场下载封装的request网络请求,按照文档配置到自己的项目上
地址:https://ext.dcloud.net.cn/plugin?id=159
配置好后修改vmeitime-http 文件夹下的 index.js 文件
再修改vmeitime-http 文件夹下的 interface.js 文件,将401状态暴漏出来
如果看到这里还是看不明白,那么请看我的源码,请注意我使用了两个插件,观众们酌情理解,仔细消化,配合到自己的项目中思考...
import http from './interface'
import config from './config'
// request.js
import Vue from 'vue'
import Router from '@/router'
//...其它逻辑代码
export const execute = (name, data = {}) => {
//设置请求前拦截器
http.interceptor.request = (config) => {
let token = uni.getStorageSync('accessToken')
delete config.header['x-access-token']
if (token) {
config.header['x-access-token'] = token
}
}
//设置请求结束后拦截器
http.interceptor.response = async (response) => {
const statusCode = response.statusCode;
if (statusCode === 401) {
response = await doRequest(response)
}
if (statusCode === 402) {
uni.removeStorageSync('accessToken');
uni.removeStorageSync('refreshToken');
uni.removeStorageSync('realname');
let jump = uni.getStorageSync('jump')
if (!jump) {
setTimeout(() => {
uni.showModal({
title: '提示',
content: '您的账号在其它地点登录!',
showCancel: false,
success: function(res) {
if (res.confirm) {
Router.push({
name: 'login',
params: {
'RouterName': 'home'
}
})
}
},
})
});
uni.setStorageSync('jump', 'true')
}
}
if (statusCode == 403) {
let jump = uni.getStorageSync('jump')
if (!jump) {
setTimeout(() => {
Router.replace({
name: 'login',
params: {
'RouterName': 'home'
}
})
},500)
uni.setStorageSync('jump', 'true')
}
}
// 统一处理错误请求
const code = response.data.code;
const message = response.data.message;
if (response.statusCode == 200 && code !== 0 && code != -1 && code) {
uni.showToast({
title: message,
icon: "none",
duration: 2000
});
}
return response;
}
return http.request({
name: name,
baseUrl: config.base,
url: config.interface[name].path,
method: config.interface[name].method ? config.interface[name].method : 'GET',
dataType: 'json',
data,
})
}
export default {
execute
}
// 刷新 token 方法
async function doRequest(response) {
const res = await execute('refresh', {refreshToken: uni.getStorageSync('refreshToken')})
const {
code,
data
} = res.data
if (code == 0) {
uni.setStorageSync('accessToken', data.accessToken)
uni.setStorageSync('refreshToken', data.refreshToken)
let config = response.config
config.header['x-access-token'] = data.accessToken
const resold = await execute(config.name,{ ...config.data
})
return resold
} else {
uni.removeStorageSync('accessToken');
uni.removeStorageSync('refreshToken');
uni.showToast({
title: '登陆过期请重新登陆！',
icon: "none",
success() {
Router.push({
name: 'login',
params: {
'RouterName': 'home'
}
})
}
});
}
}
以上就是详解uniapp无痛刷新token方法的详细内容，更多关于uni-app无痛刷新token方法的资料请关注华域联盟其它相关文章！
您可能感兴趣的文章:
- SpringBoot JWT实现token登录刷新功能
- 关于Vue 消除Token过期时刷新页面的重复提示问题
- 详解ASP.NET Core Web Api之JWT刷新Token
- 请求时token过期自动刷新token操作
- SpringSecurity Jwt Token 自动刷新的实现
- 基于springboot+jwt实现刷新token过程解析
- vue下axios拦截器token刷新机制的实例代码
- Laravel (Lumen) 解决JWT-Auth刷新token的问题
- 如何实现无感刷新token
本文由 华域联盟 原创撰写：华域联盟 » 详解uniapp无痛刷新token方法
转载请保留出处和原文链接：https://www.cnhackhy.com/68772.htm
