uni-app (安卓、微信小程序)接口封装 token失效自动获取新的token

news2024/7/6 18:17:17

一、文件路径截图

1、新建一个文件app.js存放接口

//这里存放你需要的接口
 
import {request} from '@/utils/request.js' //这个文件是请求逻辑处理
module.exports = {
	// 登录 -- 注册
	perssonRegister: (data) => { // 供应商注册 
		return request({
			url: 'manageWx/Login/perssonRegister',
			method: "post",
			data
		})
	}
},

2、新建一个文件request.js

const host = "http://192.168.1.10:8081/jeecg-boot/" //这个是本地地址,项目上线可以换成线上
export const request = (options) => {
	console.log(options, `调用接口`)
	return new Promise((resolve, reject) => {
		const WXUSER = uni.getStorageSync('WXUSER');
		if (!options.url) {
			console.error('请传入URL')
			return;
		}
		if (!WXUSER.rememberToken) {
			wxlogin(options).then(() => {
				sendRequest(options, resolve, reject);
			});
		} else {
			sendRequest(options, resolve, reject);
		}
	})
};
//封装的发送请求函数
function sendRequest(options, resolve, reject) {
	const WXUSER = uni.getStorageSync('WXUSER');
	uni.request({
		url: options.url,
		data: options.data || '',
		method: options.method || 'POST',
		header: {
			"X-Access-Token": WXUSER.rememberToken,
		},
		success: (res) => {
			if (res.data.code == 401) {
				console.log('返回401')
				wxlogin(options).then(() => {
					sendRequest(options, resolve, reject);
				});
			} else resolve(res.data)
		}
	})
};
//  token失效请求微信的无痕登录   app 就换成自己的登录接口
export async function wxlogin(options) {
	return new Promise((resolve, reject) => {
		uni.getUserInfo({
			success: (UserRes) => {
				uni.login({
					desc: 'weixin',
					success: res => {
						wx.request({
							url: `${host}manageWx/Login/queryUserByPhone`, //换成在自己登录接口
							method: 'POST',
							data: {
								weappCode: res.code,
							},
							success: res => {
								if (res.data.success) {
									console.log(res.data.result.wxUser)
									const WXUSER = res.data.result.wxUser
									const SYSUSER = res.data.result.sysUser
									uni.setStorageSync('WXUSER',WXUSER);
									uni.setStorageSync('SYSUSER',SYSUSER);
									resolve(); // 登录成功后,返回resolve
								} else {
									console.log('登录错误', res)
									reject(); // 登录失败时,返回reject
								}
							}
						});
					}
				});
			}
		})
	});
};
module.exports = {
	request,
	host
}

3、页面使用

<!--@ 商品列表 -->
<template>
	

</template>
<script>
	import {perssonRegister} from '@/utils/app.js' //调用接口使用
	export default {
		name: "PlaceOrderGoods",
		
		data() {
			return {
				dataSource: [],
				
			};
		},

	
		onLoad() {
		
			this.loadData()
		},
		methods: {
			
			// 单位名称的数据
			async loadData() {
                
                const pames = {}
                
    await queryUnitName(pames).then(res => {
						if (res.code == 200) {
							this.dataSource= res.result
						}
					})
					.catch(err => {
						// 失败执行
					})
					.finally(() => {
						// 执行代码正确、报错都执行	
						
					});

			},
			
			

		}
	};
</script>

<style lang="scss" scoped>
	
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1406258.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

npm i 报一堆版本问题

1&#xff0c;先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2&#xff0c; npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason…

【echarts图表】提示暂无数据

【echarts图表】提示暂无数据 背景&#xff1a;echarts图表数据有时候为空数组[ ]&#xff0c;这时候渲染图表异常&#xff0c;需要提示暂无数据 // 提示 暂无数据 : noDataBox 样式 this.$nextTick(() > {const dom document.getElementById("echartsId");dom…

JAVA的面试题四

1.电商行业特点 &#xff08;1&#xff09;分布式&#xff1a; ①垂直拆分:根据功能模块进行拆分 ②水平拆分:根据业务层级进行拆分 &#xff08;2&#xff09;高并发&#xff1a; 用户单位时间内访问服务器数量,是电商行业中面临的主要问题 &#xff08;3&#xff09;集群&…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-9 HTML5 表单验证

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>HTML5 表单验证</title> </head><body> <form action"#" method"get">请输入您的邮箱:<input type"email&q…

如何基于 ESP32 芯片测试 WiFi 连接距离、获取连接的 AP 信号强度(RSSI)以及 WiFi吞吐测试

测试说明&#xff1a; 测试 WiFi 连接距离&#xff0c;是将 ESP32 作为 WiFi Station 模式来连接路由器&#xff0c;通过在开阔环境下进行拉距来测试。另外&#xff0c;可以通过增大 WiFi TX Power 来增大连接距离。 获取连接的 AP 信号强度&#xff0c;一般可以通过 WiFi 扫描…

matlab appdesigner系列-常用18-表格

表格&#xff0c;常用来导入外部表格数据 示例&#xff1a; 导入外界excel数据&#xff1a;data.xlsx 姓名年龄城市王一18长沙王二21上海王三56武汉王四47北京王五88成都王六23长春 操作步骤如下&#xff1a; 1&#xff09;将表格拖拽到画布上 2&#xff09;对app1右键进行…

【深度学习:集中偏差】减少计算机视觉数据集中偏差的 5 种方法

【深度学习&#xff1a;集中偏差】减少计算机视觉数据集中偏差的 5 种方法 有偏差的计算机视觉数据集会导致哪些问题&#xff1f;如何减少计算机视觉数据集中偏差的示例观察并监控带注释样本的类别分布确保数据集代表模型适用的人群明确定义对象分类、标记和注释的流程为标签质…

【书生·浦语】大模型实战营——第六课笔记

视频链接&#xff1a;https://www.bilibili.com/video/BV1Gg4y1U7uc/?vd_source5d94ee72ede352cb2dfc19e4694f7622 教程文档&#xff1a;https://github.com/InternLM/tutorial/blob/main/opencompass/opencompass_tutorial.md 仓库&#xff1a;https://github.com/open-compa…

(学习日记)2024.01.23:结构体、位操作和枚举类型

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

【JavaEE Spring】MyBatis 操作数据库 - 进阶

MyBatis 操作数据库 - 进阶 1. 动态SQL1.1 \<if>标签1.2 \<trim>标签1.3 \<where>标签1.4 \<set>标签1.5 \<foreach>标签1.6 \<include>标签 1. 动态SQL 动态 SQL 是Mybatis的强⼤特性之⼀&#xff0c;能够完成不同条件下不同的 sql 拼接…

[完美解决]Vue/React项目运行时出现this[kHandle] = new _Hash(algorithm, xofLen)

问题出现的原因 出现这个问题是node.js 的版本问题&#xff0c;因为 node.js V17开始版本中发布的是OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制&#xff0c;可能会对生态系统造成一些影响。故此以前的项目在使用 nodejs V17以上版本后会报错。而github项目…

【6】密评中对服务端采用“挑战-响应”机制进行身份鉴别的验证

对服务端采用“挑战-响应”机制进行身份鉴别的验证 1、提取出服务端的签名值 签名值&#xff08;hex&#xff09;&#xff1a; 3045022100e4795b5a947526f8e7cbd0edd571ea8749e0efd24323799346ea2c740c006c5a0220026189e51c19d20d40a82606d0ed72cb9530a189bbb94c09e4559d7d8f…

[C++]使用yolov8的onnx模型仅用opencv和bytetrack实现目标追踪

【官方框架地址】 yolov8: https://github.com/ultralytics/ultralytics bytetrack: https://github.com/ifzhang/ByteTrack 【算法介绍】 随着人工智能技术的不断发展&#xff0c;目标追踪已成为计算机视觉领域的重要研究方向。Yolov8和ByTetrack作为当前先进的算法&…

【GitHub项目推荐--Git 教程】【转载】

本开源项目是 Will 保哥在 2013 第 6 界 IT 邦帮忙铁人赛年度大奖的得奖著作。这是一个 Git 教程&#xff0c;这个开源教程用 30 天的时间&#xff0c;带领大家详细了解使用 Git 。 重点介绍了 Git 的一些常用操作&#xff0c;以及日常工作中实际应用场景讲解&#xff0c;下图…

java 开源中文的繁简体转换工具 opencc4j

Opencc4j Opencc4j 支持中文繁简体转换&#xff0c;考虑到词组级别。 Features 特点 严格区分「一简对多繁」和「一简对多异」。 完全兼容异体字&#xff0c;可以实现动态替换。 严格审校一简对多繁词条&#xff0c;原则为「能分则不合」。 词库和函数库完全分离&#xff…

设计模式: 装饰模式

文章目录 一、什么是装饰模式二、装饰模式的结构三、使用场景案例分析 一、什么是装饰模式 在不改变对象原有行为的基础上&#xff0c;动态的来为该对象绑定新的行为。 二、装饰模式的结构 装饰模式结构中主要包含如下角色&#xff1a; Component&#xff08;抽象部件&…

一带一路暨金砖国家技能发展国际联盟大数据和人工智能专业委员会名单

四川城市职业学院和陈老师在序号&#xff1a;158&#xff0c;300 一带一路暨金砖国家技能发展国际联盟大数据和人工智能专业委员会名单 各相关单位&#xff1a; 一带一路暨金砖国家技能发展国际联盟大数据和人工智能专业委员会于2023年11月12日正式成立。经各单位申请、大数据…

浪花 - 添加队伍业务开发

一、接口设计 1. 请求参数&#xff1a;封装添加队伍参数 TeamAddRequest package com.example.usercenter.model.request;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.ann…

06章【Eclipse与异常处理】

Eclipse开发环境使用入门 Eclipse开发环境使用入门 下载安装配置环境Eclipse入门 异常处理 异常 异常是阻止当前方法或作用域继续执行的问题&#xff0c;在程序中导致程序中断运行的一些指令 try与catch关键字 在程序中出现异常&#xff0c;就必须进行处理&#xff0c;处理格…

2024.1.23 GNSS 零散知识 学习笔记

1.天线种类 2.接收机 2.四大导航系统的介绍 3.卫星高度与轨道卫星种类 4.GNSS有哪些应用 5.在空间保持静⽌或匀速直线运动(⽆加速度)的坐标系称为惯性坐标系。 6.地⼼惯性坐标系实际上并没有满⾜能成为惯性坐标系的条件&#xff1a; ⾸先&#xff0c;地球及其质⼼都在围绕太阳…