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不能传入对象

原文地址:https://www.cnblogs.com/qiu-Ann/p/11346854.html

时间: 2024-10-10 18:13:36

uni-app 保持登录状态 (Vuex)的相关文章

如何维持App拥护登录状态(仅仅理论)

这个问题太过于常见,也过于简单,以至于大部分开发者根本没有关注过这个问题,我根据和我沟通的开发者中,总结出来常用的方法有以下几种: 一:服务端默认的session 这种方式最大的优点是服务端不用增加任何代码,但APP与网站不同,通常情况下,我们会希望APP的登陆状态能维持数天,甚至数月之久,大部分的服务端程序,都会在进程重启时或客户端多久不活动时,将session全部清空,致使状态丢失 二.在客户端记录登陆用户的用户名和密码 客户端在登陆时,判断如果服务端返回验证成功,则将用户名和密码(为了客户

App登录状态维持

转载地址:http://www.jianshu.com/p/4b6b04244773 目前APP大都支持长登录,就是用户登录一次后,如果用户没有主动注销.清除APP缓存数据或卸载APP,就在一段时间内或一直保持登录状态.一般情况下,有以下三种方式: 利用Token实现 APP登录成功后,服务器以某种方式,如随机生成N位的字符串作为Token,同时设置一个有效期,存储到服务器中,并返回Token给APP. 后续APP发送请求时,都要带上该Token,每次服务器端收到请求时,都要验证Token和有效

Haytham个人博客开发日志 -- Flask+Vue基于token的登录状态与路由管理

指路牌 符合一下关键词,这篇博客有可能会对你有帮助 不使用工厂函数的Flask应用 不使用蓝本的Flask应用 Flask跨域配置 基于Token的登录状态管理 Flask+Vue Vue路由拦截 Axios 钩子 适用场景 这是一篇个人博客搭建的记录博客,也是一篇关于Flask和Vue的简单"工具书",最后的代码会包含Web开发中常用的功能.(不全,只是使用频率相对高的) 环境 系统: 无关 Flask(Python3) Vue(Node.js) 参考 <Flask Web开发

如何解决每次向后台发起请求时判断用户是否处于登录状态?

事件起因: 小x向我反应用户在我开发的系统中,在其中一个功能上待了很长时间,当用户跳转到其他界面上时,突然就掉线了. 他告诉我应当在用户每次向后台索取数据的时候进行用户登录状态的检验. 用户的登录状态其实是个比较繁琐的过程.按照业务的要求,当用户点击登录界面的保存密码按钮时,在本地的cookie进行长达七天的保存.当用户没有点击保存密码的时候,主要依靠session来进行保存. session与cookie: 这两者之间的关系,网上有太多内容介绍了.简单来说:session放在服务器端.当浏览器

uni.app实践---微信公众号h5开发记实-----第一篇

介绍:==uni-app== 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可编译到iOS.Android.H5.以及各种小程序(微信/阿里/百度/头条/QQ)等多个平台. uni-app官网:传送门 uni-app插件市场:传送门 前一段时间因为个人了解到这个比较nb的多端开发框架,所以有兴趣自己去尝试了一下,从开始的搭建项目到微信公众号h5的登录-->微信支付都尝试了一遍.第一次尝试也踩了很多的坑.相信有很多小伙伴也遇到过这样的疑惑和问题.(大神略过),所以在这里写下

Asp.Net使用加密cookie代替session验证用户登录状态 源码分享

首先 session 和 cache 拥有各自的优势而存在.  他们的优劣就不在这里讨论了. 本实例仅存储用户id于用户名,对于多级权限的架构,可以自行修改增加权限字段   本实例采用vs2010编写,vb和c#的代码都是经过测试的:一些童鞋说代码有问题的 注意下    什么? 你还在用vs2008 vs2005? 请自行重载 带有 optional 标致的函数   童鞋们提到的 密码修改后 要失效的问题 当时没有想到 个人认为 大致方向可以> >1. 每个用户生成1个xml 里面保存随机的几

Android Cookie共享到WebView避免再次登录(保持登录状态)

最近在做项目时用到了webview打开指定链接的网页,可已经把webview设置了cookie但始终跳转到登录页面,这明显是cookie没有设置成功导致webview没有将设置好的cookie发送出去…… 1 2 3 4 5 CookieSyncManager.createInstance(context); CookieManager cookieManager = CookieManager.getInstance(); cookieManager.setAcceptCookie(true)

【转载】.NET模拟POST登录并保持登录状态

好了,还是由于工作需要 要登录一个网站并且模拟点击下载某些东西 原理就是先对一个地址(地址是用户名和密码输入框所在的form的action对应的页面)进行POST提交用户名和密码(不考虑验证码,当然验证码也可以破解),用一个CookieContainer保持Response的cookie,保证了每次请求使用同一个已经登录的session. 本类部分代码来源于网上,功能有待完善,目前只实现了登录和登录后访问"后台"页面. 代码: public class LogingHelper { p

[MVC学习笔记]6. 使用Memcache+Cookie解决分布式系统共享登录状态

      为了解决单机处理的瓶颈,增强软件的可用性,我们需要将软件部署在多台服务器上启用多个二级子域名以频道化的方式,根据业务功能将网站分布部署在独立的服务器上,或通过负载均衡技术(如:DNS轮询.Radware.F5.LVS等)让多个频道共享一组服务器.当我们将网站程序分部到多台服务器上后,由于Session受实现原理的局限,无法跨服务器同步更新Session,使得登录状态难以通过Session共享.       我们使用MemCache+Cookie方案来解决分布式系统共享登录状态的问题.