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进行 ...
随机推荐
- jquery中的ajaxSetup
在项目开发中如果我们想给某一个页面中的所有的ajax设置统一的参数的情况下,可以是使用ajaxSetup,非常好用 $.ajaxSetup({ type:'post', dataType:'json' ...
- Java基础-异常处理机制 及异常处理的五个关键字:try/catch/finally/throw /throws
笔记: /** 异常处理机制: 抓抛模型 * 1."抛", 一旦抛出,程序终止! printStackTrace()显示异常路径! * 2."抓", 抓住异常 ...
- 2018/7/31-zznu-oj-问题 B: N! 普拉斯 -【求大数的阶乘-ll存不下-然后取尾零的个数输出-暴力模拟】
问题 B: N! 普拉斯 时间限制: 1 Sec 内存限制: 128 MB提交: 114 解决: 35[提交] [状态] [讨论版] [命题人:admin] 题目描述 在处理阶乘时也需要借助计算器 ...
- JAVA遇见HTML——JSP篇(JSP内置对象下)
request.getSession() 网上资料解释: request只能存在于一次访问里 session对象的作用域为一次会话 session长驻在服务器内存里,session有id标识,一个se ...
- nginx 重发机制导致的重复扣款问题
问题: nginx 重发机制导制重复提交(客户还款,被扣俩笔款,前端调用一次,后端执行2次) proxy_next_upstream 语法: proxy_next_upstream error ...
- Lua 学习之基础篇六<Lua IO 库>
引言 I/O 库提供了两套不同风格的文件处理接口. 第一种风格使用隐式的文件句柄: 它提供设置默认输入文件及默认输出文件的操作, 所有的输入输出操作都针对这些默认文件. 第二种风格使用显式的文件句柄. ...
- Java8-Executors-No.01
import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...
- webdriver对各种浏览器的支持
1.Firefox WebDriver实现了FireFoxDriver,无需用户下载FireFoxDriver. 优点:FireFoxDriver对页面的自动化测试支持得比较好,很直观地模拟页面的操作 ...
- vue文件夹上传插件选哪个好?
文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...
- pyecharts v1 版本 学习笔记 折线图,面积图
折线图 折线图 基本demo import pyecharts.options as opts from pyecharts.charts import Line c = ( Line() .add_ ...