UNIAPP如何记住密码自动登录[u1]

Posted 2022-11-24 F1gh4

开头

暑假，8月份，之前的一个代码比赛打完了，暑假也打了一波CTF比赛，好像是一个很难的比赛，啥也没有，最近在挖洞，发点之前的简单的东西，积累小的东西，汇成大的东西，回报社会。
振作起来了，坚决而迅速

开发：

UNIAPP是基于vue的框架：
1.实现功能：
实现基本的APP功能，也就是一次登录之后，再点开APP可以直接进入界面。
2.实现方法：
利用方法uni.setstorage存入内存，实现读写使用，当然存入sqlite里也是可以的。
3.实现工具：
HBuider 3.0++
4.开始：
写出一个即为简单的界面：

这个记住账号密码可以先不用管，暂时无关，默认自动登录：

登录框的逻辑：

<view class="input-box">
				<input class="in input-1" v-model="info.username" type="text"  placeholder="账 号" />
				<input class="in input-2" v-model="info.passwd"  type="text" placeholder="密 码" />
			</view>

动态绑定到了info数组中的username和passwd,把输入的账号密码，绑定到data中：
导出默认值中：

export default
		data()
			return
				info:
					username:'',
					passwd:''
				,
				rember:true
			
		
		//代码仅作示范，不完整
		

在钩子函数中,用uni.getstoragesync获得存储的username和passwd,没存储的话，要自己输入，存储了的话，就直接取出来登录

export default
		data()
			return
				info:
					username:'',
					passwd:''
				,
				rember:true
			
		,
		mounted() 
			const username = uni.getStorageSync('username');
			const passwd = uni.getStorageSync('passwd');
			
			let th = this.info; 
			
			if(username&&passwd)
				this.navigateto();
				th.username = username;
				th.passwd = passwd;
			
			else
				th.username="";
				th.passwd="";
			
			
		

然而，在点开APP后，登录界面会一闪而过，影响体验：
想办法消除这个效果，
在App.vue中的 onlauch() 函数中加入：

			//解除跳转时闪过的登录页
			let userinfo = uni.getStorageSync('username');
			if(!userinfo)
				uni.reLaunch(
						url:"/pages/login/login",
						success:()=>
							//跳转完页面后再关闭启动页
							plus.navigator.closeSplashscreen();
						
					)
			
			else
				
				 plus.navigator.closeSplashscreen(); //关闭启动页，进入首页
			

根据是否有缓存账号密码，直接进行跳转，在这之前在manifest.json中关闭默认启动界面：
就是如图，splashscreen中属性都改为’false’

然后就不会有登录界面一闪而过了。