【转】uni-app 本地数据缓存建立用户注册登录退出状态实例

fengrui99

原文转自枫瑞网 原帖地址请访：https://www.frbkw.com/1745/

本文章是通过缓存建立一个注册一个用户保存在本地缓存key中，在通过本地key对比用户和密码正确着跳转登入界面。登入界面有一个if判断，如本地用户没有登入着显示默认头像，用户登入着获取用户ID和头像等，退出用户清空本地缓存。这是简单的概述下思路。初步介绍uni.setStorage用法，后期在更新通过API让用户登入。


1.获取模板

a.uni-app插件市场有很多模板，我们直接下载不去自己写（偷懒Ing！）Simple-login包含登录注册页面模版下载地址:https://ext.dcloud.net.cn/plugin?id=962.注册表单下载好后导入到Hbuilder x中，register.vue界面中我们去建立一个表单 ，在按钮位置添加form-type=”submit”

[Asm] 纯文本查看 复制代码

<view class=" registerbtn has-radius has-mgtb-20">
				<button form-type="submit">注 册</button>
</view>

切在最外层添加一个submit触发一个名为tijiao的事件

[HTML] 纯文本查看 复制代码

<form @submit="tijiao">
				<view class="has-mglr-10 ">
					<view class=" has-mgtb-10 ">
						<input name="username"  type="text" maxlength="11" placeholder="请输入手机号" class="is-input1 " />
					</view>

					<view class=" has-radius has-mgtb-10">
						<input name="password" placeholder="请输入登录密码" :password="true" class="is-input1" />

					</view>
					<view class=" registerbtn has-radius has-mgtb-20">
						<button form-type="submit">注 册</button>
					</view>
				</view>
			</form>

在methods方法中添加tijiao事件函数和本地缓存 uni.setStorageSync（‘key名字’，‘key内容’），在次位置下断点

[HTML] 纯文本查看 复制代码

methods: {
			tijiao (e) {
				uni.setStorageSync("userpass",userdata);
        debugger;
        }
}

运行到微信小程序或者模拟器（H5不能用切记）随意输入字母点击注册，在断点中查看是否有数据 有数据那我们就意味着成功拉！如果大家要在控制台打印出来

[HTML] 纯文本查看 复制代码

var userdata = e.detail.value;
console.log(e.detail.value);

其实打不打印都差不多哈！当我们点击后需要一个提示告诉用户注册成功，直接在tiajiao方法中添加一个弹窗就好，枫瑞为了方便在弹窗点击确定后跳转到登录界面

[HTML] 纯文本查看 复制代码

uni.showModal({
					title: '友情提示',
					content: '注册成功！是请往登入界面',
					success: function (res) {
						//点击确定后跳转界面
						if (res.confirm) {
							uni.switchTab({
								url: 'login'
							})
						} 
					}
				});

3.登陆界面登录界面会比注册难一点点，因为要获取用户输入的内容，然后和我们本地key对比，获取input框输入内容使用v-model，好像插件就写好了

[HTML] 纯文本查看 复制代码

<input v-model="login.password" placeholder="请输入登录密码" class="is-input1"  @input="BindInput" data-val="password"/>

key是一个对象，我们首先在return中声明一下

[HTML] 纯文本查看 复制代码

return {
				login: {
					loading: false,
					phone:"",
					password:"",
					bendi:{}
					
				},

			};

随后我们得在这个界面获取到我们得本地uni-app数据缓存，写onLoad里面，为了验证我们先打印看下有没有数据

[HTML] 纯文本查看 复制代码

onLoad() {
			this.login.bendi = uni.getStorageSync("userpass");
			console.log(this.login.bendi)
		},

在插件中的登陆有一个tap事件 我们就直接用这个了

[HTML] 纯文本查看 复制代码

<button :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}} </button>

methods中添加函数，第一步我们的先确定key是不是存在的（上面onLoad其实可以看出有的，但是安全嘛在验证一次）

[Asm] 纯文本查看 复制代码

this.login.loading = true;

第二步 对比key的用户名密码这里用if去对比，对比成功跳转个人中心。整体代码如下

[Asm] 纯文本查看 复制代码

efaultHandlerLogin:function(){
				this.login.loading = true;
				if (this.login.bendi.username === this.login.phone) {
					if (this.login.bendi.password == this.login.password) {
						console.log("登陆成功")
						uni.showModal({
							title: '友情提示',
							content: '登陆成功',
							success: function (res) {
								uni.switchTab({
									url: 'index'
								})
							}
						});
					}else {
						console.log("密码错误")
						uni.showModal({
							title: '友情提示',
							content: '密码错误',
							success: function (res) {
							}
						});
					}
				}else {
					console.log("密码或账号错误")
					uni.showModal({
						title: '友情提示',
						content: '密码或账号错误',
						success: function (res) {
						}
					});
				}
				setTimeout((e=>{
					this.login.loading = false;
				}),1500);
				console.log(JSON.stringify(this.login)); 
			},

其实if可以缩写，但是为了装逼就不简化了哈哈！如果大家要看本地得key在控制台中storage中就可以看到了 4.个人中心个人中心我写在index页面下，那么首先我们得在pages.json中声明下界面

[Asm] 纯文本查看 复制代码

{
		    "path" : "pages/ucenter/index",
		    "style" : {
				"navigationBarTitleText" : "个人中心",
				"app-plus":{
					"bounce":"none"
				}
			}
		},

和底部导航

[Asm] 纯文本查看 复制代码

{
				"pagePath": "pages/ucenter/index",
				"iconPath": "static/img/footer/footer-home.png",
				"selectedIconPath": "static/img/footer/footer-home-act.png",
				"text": "登入"
			},

首页在插件中是空白页面，老规矩先获取本地key

[Asm] 纯文本查看 复制代码

var  info = uni.getStorageSync("userpass");
			console.log(info)

成功获取后，我们去写未登录样式，在给他一个判断如果是未登录就显示某个样式，以登录则显示用户头像 用if来判断（登录显示具体看源码）if得值则由return中布尔值来分别显示

[Asm] 纯文本查看 复制代码

return {
				panduan:true,
				info:{}
			};

key值是否为空来赋值true或flase

[Asm] 纯文本查看 复制代码

if(info != null && info != "" && info != undefined){
				this_s.panduan = false;
				this_s.info=info;
				// console.log(info.username)
				console.log("有数据")
			}else{
				// this_s.panduan = false;
				// this_s.info = {};
				console.log("没数据")
			}

5.退出退出就是清除本地key

[Asm] 纯文本查看 复制代码

uni.removeStorageSync('userpass');

6.总结uni-app 本地数据缓存建立用户注册登录状态退出实例大体思路，没有使用API导致我们在退出得时候界面不会自动刷新，所有会停留在有用户的状态下

wangshuangfeng

正在使用uni-app开发项目，看着您的帖子受益匪浅。

wylksy

感谢分享

susi248

谢谢大佬分享！

hbj.xyz

楼主，这个还有源码吗？

fengrui99

hbj.xyz 发表于 2020-3-21 14:21
楼主，这个还有源码吗？

我好像删除了 没有保存

hbj.xyz

fengrui99 发表于 2020-3-22 12:00
我好像删除了 没有保存

好的，没关系，谢谢啦