uniapp 动态表单(详解uniapp无痛刷新token方法)
uniapp 动态表单
详解uniapp无痛刷新token方法前端在请求接口时,和后端定义好了,如果状态码为 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方法的资料请关注开心学习网其它相关文章!
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- yii与uniapp交互(Yii框架的路由配置方法分析)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- 览邦G08 Plus SMART WATCH 测评⑱ 全独立这才是智能手表该有的样子(览邦G08PlusSMART)
- 荣耀手表 GS 3 真机亮相 不支持无线充电(荣耀手表GS3)
- 通过体温就能为智能手表充电 原来是用NASA在空间站用的黑科技(通过体温就能为智能手表充电)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
热门推荐
- html文字标签设置(如何给HTML标签中的文本设置修饰线)
- mysql主从复制忽略问题(MySQL复制问题的三个参数分析)
- 常见伪静态规则(通过伪静态解决中文乱码问题)
- python多线程多进程运行场景(Python多线程同步---文件读写控制方法)
- python电脑自动发送邮件(python学习--使用QQ邮箱发送邮件代码实例)
- 日常操作docker命令(SEATA事务服务DOCKER部署的过程详解)
- c#中使用stopwatch统计代码执行时间
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- python菜单栏中常用的菜单(Python3实现的简单三级菜单功能示例)
- 织梦文章发布页如何增加表单(织梦CMS列表页只显示一篇文章的解决办法)