uni-app 保持登录状态 (Vuex)
在小程序中,保持登录状态是很常见的需求,今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的。
一、场景需求
1、场景:初始打开---登陆---关闭,再次打开---(已登录)上次关闭前的页面
2、cookie:传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写。
3、实现:uni-app 的官网的API 有这样一栏“数据缓存”,而且uni-app框架的主体是 VUE,那么我们就用 uni.setStorage 和 vuex 进行登录状态管理。
二、实现过程
1、vuex的声明和使用 请看 《uni-app 使用Vuex+ (强制)登录》
2、在store/index.js 中

3、在App.vue
每次进入应用前,由App.vue 中的周期函数进行监听,所以在加载函数中定义方法,从本地缓存中取出用户数据,然后调用login方法,不需要发起网络登录请求。

这样就实现了,只有不清除本地缓存,每次打开小程序应用时,都是登录状态
三、总结
看到文档,有同步和异步这两种缓存数据,那么关于同步缓存和异步缓存的区别:
以Sync结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。
通俗点说,同步就是你下步操作需要上一步必须完成才能往下执行,异步就是下面的代码和这个操作没什么关系就用异步啦。
使用异步,性能会更好;而使用同步,数据会更安全。
1、所以在App.vue中,先是使用了let userInfo = uni.getStorageInfoSync('userInfo')||''; 同步去获取缓存的数据,因为后续的操作依赖于更改storage后的数据,则需要同步。
2、在使用setStorageSync和setStorage的时发现setStorageSync不能传入对象
uni-app 保持登录状态 (Vuex)的更多相关文章
- App保持登录状态的常用方法(转)
我们在使用App时,一次登录后App如果不主动退出登录或者清除数据,App会在很长一段时间内保持登录状态,或者让用户感觉到登录一次就不用每次都输入用户密码才能进行登录.银行.金融涉及到支付类的App一 ...
- App保持登录状态的常用方法
我们在使用App时,一次登录后App如果不主动退出登录或者清除数据,App会在很长一段时间内保持登录状态,或者让用户感觉到登录一次就不用每次都输入用户密码才能进行登录.银行.金融涉及到支付类的App一 ...
- 如何维持App拥护登录状态(仅仅理论)
这个问题太过于常见,也过于简单,以至于大部分开发者根本没有关注过这个问题,我根据和我沟通的开发者中,总结出来常用的方法有以下几种: 一:服务端默认的session 这种方式最大的优点是服务端不用增加任 ...
- 黄聪:保持web页面生成的app一直处于用户登录状态不退出
用户登录了会员中心,怎么保持登录状态! 由于封壳的内核及组件肯定没有浏览器APP应用那么强大,所以目前暂时的解决方案是: jquery.cookie.js 本文转载至:https://www.cnb ...
- App登录状态维持
转载地址:http://www.jianshu.com/p/4b6b04244773 目前APP大都支持长登录,就是用户登录一次后,如果用户没有主动注销.清除APP缓存数据或卸载APP,就在一段时间内 ...
- vuex实现登录状态的存储,未登录状态不允许浏览
基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独 ...
- Vue管理系统前端系列三登录页和首页及`vuex`管理登录状态
目录 登录页面设计 vuex 对应 用户模块 丰富界面 首页相关代码 登录页面设计 该节记录了登录界面的设计,以及 vuex 的简单实用,然后将首页简单搭建完成. 先看最终效果图 先在 views 文 ...
- vue用户登录状态判断
之前项目中用来判断是否登录我写了多种方案,但是最终只有一个方案是比较好的,这篇博客就是分享该方案; 先说基本要求: 项目中的登录状态是依据服务器里的状态来作为判断依据; 每一个需要登录后才能操作的接口 ...
- nuxt如何处理用户登录状态持久化:nuxtServerInit 页面渲染前的store处理
vue-cli项目中,我们可以用vuex-persistedstate,它可以使vuex的状态持久化,页面刷新都不会丢失,原理当然是localStorage啦!当然也可以使用vue-cookies进行 ...
随机推荐
- 一个页面,WEB全功能
当鼠标在页面上往下滑动的时候,页面也一直向下,标签也顺带着全部向下滑动 以前浏览页面,主要是在PC上进行浏览,一个页面不适于太长,需要用户向下拖动: 当时的设计是,点击标签,点击不同的标签,跳转到不同 ...
- Install RabbitMQ on CentOS 7
NOTE: this article is only for CentOS 7 How to Install RabbitMQ on CentOS 7 yum update Install erlan ...
- 系统---添加一个相机的IP实现opencv读取rstp视频流
系统---添加一个相机的IP实现opencv读取视频流 这里: 第一步,添加一个6段的相机IP地址:先ping 一个IP地址,ping通的是再用的IP,不可添加:ping不通的,添加IP到网络. 第二 ...
- Ubuntu系统---编译opencv程序的几种方式g++、Makefile、Cmake
Ubuntu系统---编译opencv程序的几种方式g++.Makefile.Cmake 先建立一个工程(一个文件夹),写好xxx.cpp文件,可以是多个: //----------opencv.cp ...
- 使用pyinstaller打包使用scrapy模块的程序运行时出现No such file or directory的问题解决
解决的方案是利用pyinstaller的hook特性,步骤如下: 1.在项目目录新建hooks目录,目录中新建hooks-scrapy.py 文件,文件内容如下: from PyInstaller.u ...
- asp.net core 读取appsettings.json配置项
1.新建一个asp.net core 项目 2.打开appsettings.json,加入配置项 { "Logging": { "IncludeScopes": ...
- js访问数据库
一.js访问数据库的一般步骤: 1. 创建一个到数据库的 ADO 连接 conn = new ActiveXObject("ADODB.Connection"); 2. 打开数据库 ...
- HDU 6134 Battlestation Operational | 2017 Multi-University Training Contest 8
破结论没听说过,上式推导到第三步的时候有了O(nlogn) 的做法(枚举倍数+1最后前缀和),并且这种做法可以直接应用到向上取整的计算中,详见forever97 但由于d(n)是积性函数,故可O(n) ...
- AtCoder Beginner Contest 142【D题】【判断素数的模板+求一个数的因子的模板】
D - Disjoint Set of Common Divisors Problem Statement Given are positive integers AA and BB. Let us ...
- win10以及ubuntu下设置pip源
问题描述:有一段时间下载python库的时候速度非常慢,想着提高安装python库的速度. window10下: 一:首先进入c盘的用户目录,如我的目录为C:\Users\felix. 二:创建名为p ...