在应用中保持登录状态是一个应用常见的需求,本文简略引见下在 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官网。

立即

咨询

400电话

电话咨询

400-1875-778

微信咨询

李经理

微信扫一扫加好友

下载源码

返回顶部