解决方案

uni-app 中保持用户登录状态

作者:仙宝云 | 发布时间:2021-06-11 17:04:23 | 阅读:476

在应用中保持登录状态是一个应用常见的需求,本文简略引见下在 uni-app 中如何保留用户登录状态

简介

uni-app 中不支撑读写 cookie,所以不能假如传统的应用那样通过读取 cookie 来断定是否是登录状态

在 uni-app 进行登录操作经常,可以将需要校验的数据放在 uni.request 的 data 中,也可以在 header 里设置 token,使用 token 进行登录状态校验

流程:首页为未登录状态 => 进行登录 => 首页状态改动 => 退出应用再次进入仍然是已登录状态

vuex

利用 vuex 进行管理登陆状态和保留用户信息,下面是局部代码

登录

在 login.vue(登录页面)输入用户名密码后,调用 uni.request 进行登录,登录成功后调用 vuex 的办法改动应用的登陆状态

改动首页状态

经过 vuex 中保留的 hasLogin 断定是否是登录状态,从而显示不同的内容

再次进入利用

在 App.vue 中断定用户是不是保留用户信息 “uerInfo”,如果保存则以为是登录状态,未保留则为未登录状态

App.vue 中获得用户信息后需要同步改动 vuex 的状态,使所有页面都能共享登陆状态与用户信息

附件为demo,但是直接在 HBuilderX 中运转体验全部登录流程

login.zip下载地点:https://ask.dcloud.net.cn/file/download/file_name-bG9naW4uemlw__url-Ly9pbWctY2RuLXFpbml1LmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9hcnRpY2xlLzIwMTkwMzA2LzU5NzU3YmQ0OTAyYmExMTNiMTdkZWU2YWE4MTI5N2Jl

本文来源于uni-app官网。

智慧商业服务商仙宝云欢迎您!

请加微信: 18962171986 (宋经理)

在线咨询