uni-app写的微信小程序如何实现账号密码登录后获取token,并且每天的第一次登录后都会直接获取参数而不是耀重新登录(1)

uni-app写的微信小程序如何实现账号密码登录后获取token(而token的有效器一般是30分钟,当页面在操作时token是不会过去,,离开页面第二天登录时token就是过期状态,因为记住了账号密码就不会操作再次登录,但是这样会出现一个token过期的问题,会导致页面无法获取到参数,导致页面无法正确的拿到相关的内容),并且每天的第一次登录后都会直接获取参数而不是耀重新登录

在app.vue中

<script>
import { login, appgetInfo } from '@/src/api/api.js';
export default {data() {return {lastLeaveTime: null,threshold: 2 * 60 * 60 * 1000, // 2小时};},onLaunch: function() {console.log('App Launch');this.autoLogin();},onShow: function() {// 用户重新进入小程序时,检查是否需要自动登录const currentTime = new Date().getTime();if (this.lastLeaveTime && (currentTime - this.lastLeaveTime) > this.threshold) {this.autoLogin();}},onHide: function() {// 记录用户离开的时间this.lastLeaveTime = new Date().getTime();},methods: {autoLogin() {const username = uni.getStorageSync('userName');const password = uni.getStorageSync('userPassword');if (username && password) {this.login(username, password);}},async login(username, password) {try {const response = await login(username, password);if (response.token) {uni.setStorageSync('token', response.token);uni.switchTab({url: '/pages/mine/mine',});} else {throw new Error('用户名或密码不正确');}} catch (error) {console.error('自动登录失败:', error);uni.showModal({title: '自动登录失败',content: error.message || '用户名或密码不正确',showCancel: false,});}}}
}
</script>

在/pagesA/login/login.vue登录页

<template><view class="login_a"><view class="login_w"><view class="login_s"><view><view class="tit_q">欢迎使用旭普能源管理</view></view><view class="login_x"><uni-forms ref="form" :modelValue="formData"><uni-forms-item label="用户" name="name"><uni-easyinput type="text" v-model="formData.name" placeholder="请输入账号或手机号" /></uni-forms-item><uni-forms-item label="密码" name="password"><uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" /></uni-forms-item><button @click="submitForm" type="primary">登录</button><uni-forms-item label=""><uni-data-checkbox v-model="formData.recall" multiple :localdata="formData.recalls" /></uni-forms-item></uni-forms></view></view></view></view>
</template><script setup lang="ts">
import { reactive, onMounted, computed } from 'vue';
import { login } from '@/src/api/api.js';
const formData = reactive({name: '',password: '',recall: [],recalls: [{ value: 0, text: '记住密码' },],
});
const isRemember = computed(() => formData.recall.includes(0));
onMounted(() => {const savedName = uni.getStorageSync('userName');const savedPassword = uni.getStorageSync('userPassword');if (savedName) {formData.name = savedName;}if (savedPassword) {formData.password = savedPassword;}
});
const submitForm = async () => {if (!formData.name || !formData.password) {uni.showModal({title: '提示',content: '用户名和密码不能为空',showCancel: false,});return;}if (!isRemember.value) {uni.showModal({title: '提示',content: '请选择记住密码,避免忘记密码哦!',showCancel: false,});return;}try {const response = await login(formData.name, formData.password);if (response.token) {uni.setStorageSync('token', response.token);if (isRemember.value) {uni.setStorageSync('userName', formData.name);uni.setStorageSync('userPassword', formData.password);} else {uni.removeStorageSync('userName');uni.removeStorageSync('userPassword');}uni.switchTab({url: '/pages/mine/mine',});} else {throw new Error('用户名或密码不正确');}} catch (error) {uni.showModal({title: '登录失败',content: error.message || '用户名或密码不正确',showCancel: false,});}
};
</script>

在request.js


// 封装 wx.request
const service = (options) => {return new Promise((resolve, reject) => {uni.request({url: 'http://47.104.232.49:80/dev-api/' + options.url, // 替换成你的API地址method: options.method || 'GET',  // 请求方法,默认GETdata: options.data || {},         // 请求的数据timeout: 10000,                   // 请求超时时间header: options.headers || {'Content-Type': 'application/json',},success: (res) => {if (res.statusCode === 200) {resolve(res.data); // 请求成功,返回数据} else {reject(new Error(res.data.msg || '请求失败,状态码:' + res.statusCode));}},fail: (error) => {reject(new Error(error.errMsg || '网络请求失败'));}});});
};
// 请求拦截器函数
const requestInterceptor = (options) => {const token = uni.getStorageSync('token'); // 使用 uni 的内置存储方法if (token) {options.headers = options.headers || {};options.headers.Authorization = `Bearer ${token}`;}return options;
};
// 响应拦截器函数
const responseInterceptor = (response) => {// 可以在此处处理响应结果,比如统一错误处理if (response.statusCode === 401) {uni.showModal({title: '登录过期',content: '您的登录已过期,请重新登录',showCancel: false,success: () => {uni.removeStorageSync('token');uni.removeStorageSync('userName');uni.removeStorageSync('userPassword');uni.reLaunch({url: '/pages/login/login'});}});throw new Error('登录过期');}return response;
};
// 最终封装的请求方法
const request = (options) => {const interceptedOptions = requestInterceptor(options);return service(interceptedOptions).then(responseInterceptor);
};
// 封装GET请求
export const get = (url, data, headers) => {return request({url: url,method: 'GET',data: data,headers: headers});
};
// 封装POST请求
export const post = (url, data, headers) => {return request({url: url,method: 'POST',data: data,headers: headers});
};// 封装PUT请求
export const put = (url, data, headers) => {return request({url: url,method: 'PUT',data: data,headers: headers});
};
// 封装DELETE请求
export const del = (url, data, headers) => {return request({url: url,method: 'DELETE',data: data,headers: headers});
};
export default request;

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

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

相关文章

SpringCloud框架学习(第七部分:分布式事务Seata)

目录 十五、SpringCloud Alibaba Seata处理分布式事务 1.分布式事务背景 2.Seata简介 &#xff08;1&#xff09;介绍 &#xff08;2&#xff09;工作流程 &#xff08;3&#xff09;各事务模式 &#xff08;4&#xff09;下载安装 3.Seata案例实战-数据库和表准备 …

apache中的Worker 和 Prefork 之间的区别是什么?

文章目录 内存使用稳定性兼容性适用场景 Apache中的Worker和Prefork两种工作模式在内存使用、稳定性以及兼容性等方面存在区别 内存使用 Worker&#xff1a;由于使用线程&#xff0c;内存占用较少。Prefork&#xff1a;每个进程独立运行&#xff0c;内存消耗较大。 稳定性 W…

[C#] 对24位图像进行水平翻转(FlipX)的跨平台SIMD硬件加速向量算法(使用YShuffleX3Kernel)

文章目录 一、标量算法1.1 算法实现1.2 基准测试代码 二、向量算法2.1 算法思路2.1.1 难点说明2.1.2 解决办法&#xff1a;每次处理3个向量2.1.3 用YShuffleX3Kernel对3个向量内的24位像素进行翻转 2.2 算法实现2.3 基准测试代码2.4 使用 YShuffleX3Kernel_Args 来做进一步的优…

python打包深度学习虚拟环境

今天师兄让我把环境打包发给他&#xff0c;我才知道可以直接打包深度学习虚拟环境&#xff0c;这样另一个人就不用辛辛苦苦的去装环境了&#xff0c;我们都知道有些论文他需要的环境很难装上。比如装Apex&#xff0c;装 DCN&#xff0c;mmcv-full 我现在把3090机子上的ppft虚拟…

基于MobileNet深度学习网络的MQAM调制类型识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &#xff08;完整版代码包含详细中文注释和操作步骤视频&#xff09…

Ceph分布式存储集群搭建

一.Ceph分布式存储 (1)Ceph概念:Ceph是一种高性能、可扩展的分布式存储系统&#xff0c;它提供了对象存储、块存储和文件系统存储三种存储接口,Ceph的设计目标是提供无单点故障的、高性能的、可扩展的存储解决方案&#xff0c;同时能够降低存储成本。(2)常用分布式存储方案Lust…

docker及docker exec命令学习笔记

docker exec 是一个常用的 Docker 命令&#xff0c;允许你在已经运行的容器中执行命令或启动新的进程。以下是详细介绍和常见用法&#xff1a; 基本语法 docker exec [OPTIONS] CONTAINER COMMAND [ARG...]参数详解 1. CONTAINER指定目标容器的名字或容器 ID。可以通过以下命…

<工具 Claude Desktop> 配置 MCP server 连接本地 SQLite, 本机文件夹(目录) 网络驱动器 Windows 11 系统

也是在学习中... 起因&#xff1a; 抖音博客 艾克AI分享 他的视频 #143《Claude开源MCP彻底打破AI的信息孤岛》 提到: Claude开源的MCP太强了&#xff0c;视频后面是快速演示&#xff0c;反正看了好几遍也没弄明白。菜单都不一样&#xff0c;感觉用的不是同一家 Claude. 探…

(78)MPSK基带调制通信系统瑞利平坦衰落信道传输性能的MATLAB仿真

文章目录 前言一、MATLAB仿真1.仿真代码2.仿真结果 二、子函数与完整代码总结 前言 本文给出瑞利平坦衰落信道上的M-PSK通信系统性能仿真的MATLAB源代码与仿真结果。其中&#xff0c;调制方式M-PSK包括BPSK、QPSK、8-PSK、16-PSK、32-PSK等方式。 一、MATLAB仿真 1.仿真代码 …

go语言 Pool实现资源池管理数据库连接资源或其他常用需要共享的资源

go Pool Pool用于展示如何使用有缓冲的通道实现资源池&#xff0c;来管理可以在任意数量的goroutine之间共享及独立使用的资源。这种模式在需要共享一组静态资源的情况&#xff08;如共享数据库连接或者内存缓冲区&#xff09;下非 常有用。如果goroutine需要从池里得到这些资…

LeetCode70. 爬楼梯(2024冬季每日一题 24)

假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#xf…

Android 系统之Init进程分析

1、Init进程流程 2、Init细节逻辑 2.1 Init触发shutdown init进程触发系统重启是一个很合理的逻辑&#xff0c;为什么合理&#xff1f; init进程是android世界的一切基石&#xff0c;如果android世界的某些服务或者进程出现异常&#xff0c;那么会导致整个系统无法正常使用…

用micropython 操作stm32f4单片机的定时器实现蜂鸣器驱动

import pyb import time # 初始化引脚和定时器通道作为PWM输出 # 注意&#xff1a;这里我们假设您使用的是支持PWM的引脚和定时器 # 在不同的MicroPython板上&#xff0c;支持的引脚和定时器可能不同 # 请查阅您的板的文档以确认正确的引脚和定时器 buzzer_pin pyb.Pin(PD15,…

长沙市的科技查新单位

1、中南大学图书馆科技查新站&#xff1a; 中南大学图书馆科技查新站成立于2003年12月&#xff0c;中南大学图书馆科技查新站作为教育部首批批准的科技查新工作站之一&#xff0c;具备了在全国范围内开展科技查新工作的专业资质。 2、湖南大学科技查新站&#xff1a; 湖南大学…

java基础语法光速入门

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理Java的基础语法部分 适合有编程基础的人快点掌握语法使用 没学过一两门语言的话。。还是不建议看了 极致的浓缩没有一点解释 注释 单行注释 // 多行注释 /**/ 数据类型 布尔型:true false 整型:int,lon…

【redis】集群详解

redis集群 一、集群的概念二、数据分片算法2.1哈希求余算法2.2一致性哈希算法2.3哈希槽分区算法 三、集群的搭建3.1配置docker-compose.yml文件3.2配置generate.sh脚本文件3.3构建redis集群3.4简单测试redis集群 四、故障处理流程4.1故障判定4.2故障转移 五、集群扩容 一、集群…

Linux | Linux的开机启动流程

对于linux系统的初学者来说&#xff0c;理解并掌握linux系统启动流程能够使你够深入的理解linux系统&#xff0c;还可以通过系统的启动过程来分析问题解决问题。 Linux开机启动的流程如下图 power on 开机 post自检&#xff08;检查一部分大的硬件&#xff09; BIOS&#xf…

Scala的模式匹配(5)

package hfd.test32 //匹配 变量的类型 object Test34_4 {def main(args: Array[String]): Unit {val i1val j:Double1.2val b:Booleanfalseval x:Anybx match {case _:Int>println(s"当前是Int")case _:Double>println(s"当前是Double")case a:Boo…

TiDB如何保证数据一致性

1. 分布式事务协议 TiDB 采用了类似 Google Percolator 的分布式事务协议来处理分布式事务。这个协议基于两阶段提交&#xff08;2PC&#xff09;的思想&#xff0c;但进行了优化和改进&#xff0c;以适应分布式环境的特殊需求。在 TiDB 中&#xff0c;当一个事务需要跨多个节…

【Maven系列】深入解析 Maven 常用命令

前言 在当今的软件开发过程中&#xff0c;项目管理是至关重要的一环。项目管理包括了项目构建、依赖管理以及发布部署等诸多方面。而在Java生态系统中&#xff0c;Maven已经成为了最受欢迎的项目管理工具之一。Maven 是一套用于构建、依赖管理和项目管理的工具&#xff0c;主要…