• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

uni-app微信小程序保持登录状态(vuex和本地存储)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

uni-app全局变量实现方式:见文档

方式多种多样,在这里我只对vuex和uni.setStorageSync进行说明。

方式一 :vuex
1.在项目的根目录下创建文件‘store’,并在‘store’中新建index.js(名称随意起)如下:

说明:可以在state中定义你需要的值,需要注意的是‘hasLogin’如果你需要强制用户登录,只需要在需要判断的地方获取hasLogin的值来做不同处理即可!

2把.Vuex挂载到main.js上,如下图:

挂载以后你可以通过this.$store.state.hasLogin获取值。

3.在需要使用的页面引入

说明:computed中的值可以直接通过this.hasLogin获取值。

在登录成功后获取到服务器返回的数据将数据保存在全局变量中.如下图:

4.最后在app.vue中判断是否登录,如果登录就更新全局变量达到保持登录状态效果.

整体流程:在需要登录的界面使用this.$store.state.hasLogin判断是否登录,没有登录就跳转登录页面。,当第二次登录的时候会在app.vue中判断是否登录过 如果没有你就可以开始你的表演了,(比如写个while(true)啥的,先让用户手机卡机看看当地警察的分布再说)。开玩笑,当然是写你想做的事了.比如跳转登录,或者跳转首页等操作!

方式二利用setStorage进行本地存储方式.

这种方式就显得比较简单易懂了,当用户登录成功后你接收到服务器返回的数据后利用uni.setStorageSync进行本地存储即可,用户退出登录的时候需要uni.clearStorageSync。
在需要登录才能查看的页面调用如下图的方法(声明在main.js):

方式一和方式二的区别:
方式一利用vuex来管理全局变量达到效果,方式二通过本地存储以及获取本地存储来确认是否有登录,心细的朋友都发现了 即便方式一最后还是通过setStorage保存的数据,其实这两种方式都可以使用,不同的区别在于方式一获取的是一个变量的值,方式二你需要在使用的地方获取一次本地缓存,性能方面我不是很了解 但是肯定会有所差异的,作为一个渣渣 这个我不配了解。

项目中建议方式一,因为毕竟是官方推荐的,当然使用方式二也没什么问题。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发(九)获取手机连接的wifi信息发布时间:2022-07-18
下一篇:
微信小程序的开发发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap