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进行 ...
随机推荐
- [Python] Codecombat 攻略 Sarven 沙漠 (1-43关)截止至36关
首页:https://cn.codecombat.com/play语言:Python 第二界面:Sarven沙漠(43关)时间:4-11小时内容:算术运算,计数器,while循环,break(跳出循环 ...
- 单元测试框架之unittest(二)
一.摘要 本章笔者将详细介绍组织测试代码的相关内容,所用的测试例子会是冒泡排序,笔者在从业这么久之后回想很多面试都要问冒泡排序,虽然不知道为什么要问这个,但还是希望大家掌握,它与自动化测试关系不大属于 ...
- c# json数据解析——将字符串json格式数据转换成对象或实体类
网络中数据传输经常是xml或者json,现在做的一个项目之前调其他系统接口都是返回的xml格式,刚刚遇到一个返回json格式数据的接口,通过例子由易到难总结一下处理过程,希望能帮到和我一样开始不会的朋 ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- vue3.0脚手架 创建项目
1.下载node最新稳定版本,并且安装 2.安装好之后,在cmd或者terminal下, 使用npm -v 查看当前npm版本,验证是否安装成功 3.安装成功后,运行 npm i -g @vue/cl ...
- 「Django」Django内置email发送邮件
Django内置email发送邮件 1.首先在settings.py文件设置相关参数 STATIC_URL = '/static/' # 设置邮件域名 EMAIL_HOST = 'smtp.163.c ...
- Ubuntu16安装fabric1.4.4环境
安装流程依照官网地址 https://hyperledger-fabric.readthedocs.io/en/release-1.4/build_network.html 如果需要安装最新的版本,可 ...
- P2587 [ZJOI2008]泡泡堂 神仙贪心
思路:贪心 提交:1次(看了题解$QwQ$) 题解: 若我方最弱可以干掉对方最弱,则干: 否则若我方最强可以干掉对方最强,则干: 否则若我方最弱与对方最强平手,则平: 其实貌似一二条是可以互换的,主要 ...
- keydown([[data],fn]) 当键盘或按钮被按下时,发生 keydown 事件。
keydown([[data],fn]) 概述 当键盘或按钮被按下时,发生 keydown 事件. 注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生.直线电机滑台 参数 fnFu ...
- oracle自连接
自连接:通过表的别名,将同一张表视为多张表 select e.ename 员工姓名,b.ename 老板姓名 from emp e,emp b where e.mgr=b.empno; 注:自连接不适 ...