基于uniapp的登录状态保持（APP免登录）

2024-08-31 09:28
文章标签 uniapp app 登录 状态 保持

本文主要是介绍基于uniapp的登录状态保持（APP免登录），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

基于uniapp的登录状态保持（APP免登录）

           本文介绍了uniapp的登录状态保持（APP免登录）实现方法。在rouyi-uniapp框架开发中，解决用户退出软件/关闭应用/更新安装包后，再打开进入应用需要重新登录，不符合用户使用习惯。本文介绍了如何通过将用户登录信息存储到缓存和文件中，判断用户登录状态直接进入应用。用户登录信息用必要存储到文件中，解决安装更新包更新后用户私有应用缓存被删除。

一、主要思路

  1. 改造登录方法，登录成功后，留存登录状态和登录信息、token等到缓存和本地txt文件中。(安装更新包更新后用户私有应用缓存被删除, 存储到文件中可解决问题)
  2. App.vue为公共组件，每次打开应用或者任意页面都会执行方法。在该文件中写入读取缓存和本地txt文件的方法，如果留存用户登录信息，则自动执行登录方法并跳转到首页。如果缓存和文件里都没有用户登录信息，则跳转到登录页。

二、Uniapp主要技术应用

1、uniapp本地缓存（非持久化）

const userInfo = uni.getStorageSync('userInfo'); //同步获取本地数据uni.setStorage({   key: 'userInfo',   data: user,});//设置本地存储数据

2、Uniapp文件缓存（持久化）

//文件缓存插件filePersistentIO读取文件this.$filePersistentIO.read('JTG_USR_TOKEN_INFO.txt').then(res => {loginInfoFromFile = resreturn loginInfoFromFile/*          console.log('loginInfoFromFile   res  ======================>')console.log(JSON.stringify(res))console.log(loginInfoFromFile)*/})//文件缓存插件filePersistentIO写入文件this.$filePersistentIO.storage('JTG_USR_INFO.txt', loginInfo)

3、文件缓存插件

plugins/filePersistentIO.js

// 数据持久化存储
// let addr = "file://storage/emulated/0/京唐港app/";
// let addr = "file:///storage/emulated/0/";
let addr = "JTGUser/Info/";  // 手机存储的文件位置export default {storage(className, data) {plus.io.requestFileSystem(// plus.io.PRIVATE_DOC, // 程序私有文档目录常量// plus.io.PUBLIC_DOWNLOADS, // 程序私有文档目录常量plus.io.PUBLIC_DOCUMENTS,fs => {// 创建或打开文件, fs.root是根目录操作对象,直接fs表示当前操作对象fs.root.getFile(addr + className,{create: true},// 文件不存在则创建fileEntry => {// 文件在手机中的路径fileEntry.createWriter(writer => {// 写入文件成功完成的回调函数writer.onwrite = e => {//console.log('写入成功');};// 向文件中写入数据writer.write(JSON.stringify(data));// 写入完成回调writer.onwriteend = function(res) {console.log('写入文件成功', res.target.fileName);};// 写入错误回调writer.onerror = function(err) {console.error('写入文件失败', err);};});},e => {console.log('getFile failed: ', e);});},e => {console.log(e.message);});},read(className) {let that = this;return new Promise((resolve, reject) => {plus.io.requestFileSystem(// plus.io.PRIVATE_DOC,// plus.io.PUBLIC_DOWNLOADS,plus.io.PUBLIC_DOCUMENTS,fs => {fs.root.getFile(addr + className,{create: false},fileEntry => {fileEntry.file(function(file) {console.log('文件大小:' + file.size + '-- 文件名:' + file.name);//创建读取文件对象let fileReader = new plus.io.FileReader();//以文本格式读取文件数据内容fileReader.readAsText(file, 'utf-8');//文件读取操作完成时的回调函数fileReader.onloadend = (evt) => {console.log(evt.target.result)console.log('evt.target.result')console.log(JSON.parse(evt.target.result),'JSON.parse(evt.target.result)')resolve(JSON.parse(evt.target.result))// sURL = JSON.parse(evt.target.result).URL;}// fileReader.onloadend = function(evt) {//     resolve(evt.target.result)// };});},e => {reject(e);});},e => {reject(e);console.log(e.message);});})}
}

3、插件引入

plugins/index.js

import filePersistentIO from './filePersistentIO'Vue.prototype.$filePersistentIO = filePersistentIO

三、实现案例

1、登录方法

登录信息持久化存储和缓存

（1）pages/login.vue

import {mapMutations}from 'vuex';...mapMutations(['login']),// 密码登录
async pwdLogin() {this.$store.dispatch('Login', this.loginForm).then(() => {this.$modal.closeLoading()//将登陆成功后的账号/密码放入到缓存let loginInfo = {username: this.loginForm.username,password: this.loginForm.password}uni.setStorage({key: 'loginInfo',data: loginInfo,});/** 登录信息持久化存储  */// 登录成功后将用户名密码存储到文件【安装包更新后-用户名密码自动填充，但不免登录】this.$filePersistentIO.storage('JTG_USR_INFO.txt',loginInfo)this.loginSuccess()}).catch(() => {if (this.captchaEnabled) {this.getCode()}})
},

 

  // 登录成功后，处理函数loginSuccess(result) {    // 设置用户信息this.$store.dispatch('GetInfo').then(res => {let userInfo = {userId: res.user.userName,token: uni.getStorageSync("token"),phone: res.user.phonenumber,userName: res.user.userName,jurisdiction: res.user.roleS,}   console.log("state"+uni.getStorageSync("state"))console.log("userinfo"+userInfo)debuggerthis.login(userInfo)  this.$tab.reLaunch('/pages/index')})
}
getLoginInfoFromFile(){/** 持久化存储数据读取 */let loginInfoFromFile = nullthis.$filePersistentIO.read('JTG_USR_INFO.txt').then(res => {loginInfoFromFile = resif (this.loginForm.username != '' && (loginInfoFromFile != "" && loginInfoFromFile.username == '' && loginInfoFromFile.password == '')) {this.loginForm.username = loginInfoFromFile.usernamethis.loginForm.password = loginInfoFromFile.password}/*          console.log('loginInfoFromFile   res  ======================>')console.log(JSON.stringify(res))console.log(loginInfoFromFile)*/})
},

  （2）store/index.js

Mutation触发此处的login，将登录信息存储到缓存。退出登录时清除登录信息。

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
import businessGlobeVariable from '@/store/modules/businessGlobeVariable'
import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({modules: {user,businessGlobeVariable},state: {hasLogin:false,        //用户是否登录userInfo:{}             //用户数据},mutations: {// 登录login(state,user){//登录状态为已登录state.hasLogin = truestate.userInfo = user//储存用户数据到本地uni.setStorage({key: 'userInfo',data: user,});console.log('登陆成功')console.log(state.hasLogin,state.userInfo)},// 退出登录logout(state,user){//登录状态为未登录state.hasLogin = falsestate.userInfo = {}//删除本地储存uni.removeSavedFile({key: 'userInfo',})console.log('退出登录')console.log(state.hasLogin,state.userInfo)}},actions: {},getters
})export default store

2、App.vue根组件读取登录缓存和文件

onLaunch: function() {
// 加入如下代码const userInfo = uni.getStorageSync('userInfo'); //同步获取本地数据//判断本地缓存是否存在数据if (userInfo != "") {//传到vuex里面储存起来,并改变登录状态this.login(userInfo)// 成功即跳转到首页this.$tab.reLaunch('/pages/index')}
},

checkLogin() {//debuggerconsole.log('getToken()=>'+getToken())if (!getToken()) {this.$tab.reLaunch('/pages/login')}else{const userInfo = uni.getStorageSync('userInfo'); //同步获取本地数据const userInfo1 = this.getLoginTokenInfoFromFile(); //同步获取本地数据(更新安装包后，缓存删除，从文件读取)//判断本地缓存是否存在数据if (userInfo != "") {//传到vuex里面储存起来,并改变登录状态this.login(userInfo)this.$tab.reLaunch('/pages/index')}else if (userInfo1 != "") {//传到vuex里面储存起来,并改变登录状态this.login(userInfo1)this.$tab.reLaunch('/pages/index')}}
},
getLoginTokenInfoFromFile(){/** 持久化存储数据读取 （用户名及token自动登录）*/let loginInfoFromFile = nullthis.$filePersistentIO.read('JTG_USR_TOKEN_INFO.txt').then(res => {loginInfoFromFile = resreturn loginInfoFromFile/*          console.log('loginInfoFromFile   res  ======================>')console.log(JSON.stringify(res))console.log(loginInfoFromFile)*/})
},

这篇关于基于uniapp的登录状态保持（APP免登录）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1123513。

相关文章

Security OAuth2 单点登录流程

Security OAuth2 单点登录流程

单点登录（英语：Single sign-on，缩写为 SSO），又译为单一签入，一种对于许多相互关连，但是又是各自独立的软件系统，提供访问控制的属性。当拥有这项属性时，当用户登录时，就可以获取所有系统的访问权限，不用对每个单一系统都逐一登录。这项功能通常是以轻型目录访问协议（LDAP）来实现，在服务器上会将用户信息存储到LDAP数据库中。相同的，单一注销（single sign-off）就是指
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
hdu1565（状态压缩）

hdu1565（状态压缩）

本人第一道ac的状态压缩dp，这题的数据非常水，很容易过 题意：在n*n的矩阵中选数字使得不存在任意两个数字相邻，求最大值 解题思路： 一、因为在1<<20中有很多状态是无效的，所以第一步是选择有效状态，存到cnt[]数组中 二、dp[i][j]表示到第i行的状态cnt[j]所能得到的最大值，状态转移方程dp[i][j] = max(dp[i][j],dp[i-1][k]) ,其中k满足c
阅读更多...
【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

【测试】输入正确用户名和密码，点击登录没有响应的可能性原因

目录 一、前端问题 1. 界面交互问题 2. 输入数据校验问题 二、网络问题 1. 网络连接中断 2. 代理设置问题 三、后端问题 1. 服务器故障 2. 数据库问题 3. 权限问题： 四、其他问题 1. 缓存问题 2. 第三方服务问题 3. 配置问题 一、前端问题 1. 界面交互问题 登录按钮的点击事件未正确绑定，导致点击后无法触发登录操作。 页面可能存在
阅读更多...
高并发环境中保持幂等性

高并发环境中保持幂等性

在高并发环境中保持幂等性是一项重要的挑战。幂等性指的是无论操作执行多少次，其效果都是相同的。确保操作的幂等性可以避免重复执行带来的副作用。以下是一些保持幂等性的常用方法： 唯一标识符： 请求唯一标识：在每次请求中引入唯一标识符（如 UUID 或者生成的唯一 ID），在处理请求时，系统可以检查这个标识符是否已经处理过，如果是，则忽略重复请求。幂等键（Idempotency Key）：客户端在每次
阅读更多...
状态dp总结

状态dp总结

zoj 3631  N 个数中选若干数和（只能选一次）<=M 的最大值 const int Max_N = 38 ;int a[1<<16] , b[1<<16] , x[Max_N] , e[Max_N] ;void GetNum(int g[] , int n , int s[] , int &m){ int i , j , t ;m = 0 ;for(i = 0 ;
阅读更多...
hdu3006状态dp

hdu3006状态dp

给你n个集合。集合中均为数字且数字的范围在[1,m]内。m<=14。现在问用这些集合能组成多少个集合自己本身也算。 import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStream;import java.io.Inp
阅读更多...
从状态管理到性能优化：全面解析 Android Compose

从状态管理到性能优化：全面解析 Android Compose

文章目录 引言一、Android Compose基本概念1.1 什么是Android Compose?1.2 Compose的优势1.3 如何在项目中使用Compose 二、Compose中的状态管理2.1 状态管理的重要性2.2 Compose中的状态和数据流2.3 使用State和MutableState处理状态2.4 通过ViewModel进行状态管理 三、Compose中的列表和滚动
阅读更多...
实例：如何统计当前主机的连接状态和连接数

实例：如何统计当前主机的连接状态和连接数

统计当前主机的连接状态和连接数 在 Linux 中，可使用 ss 命令来查看主机的网络连接状态。以下是统计当前主机连接状态和连接主机数量的具体操作。 1. 统计当前主机的连接状态 使用 ss 命令结合 grep、cut、sort 和 uniq 命令来统计当前主机的 TCP 连接状态。 ss -nta | grep -v '^State' | cut -d " " -f 1 | sort |
阅读更多...
uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2