利用uni-app实现记住账号密码的功能

<template>
	<view class="content">
		<view class="login-image-content">
			<image class="login-bg" src="../../static/login-bg.jpg"></image>
			<view class="login-container">
				<view class="login-box">
					<image class="login-logo" src="../../static/logo.png"></image>
					<view class="inp phone-num">
						<view class="youqige-iconfont icon-gerenzhongxin login-icon"></view>
						<input class="user-name-inp" type="text" placeholder-style="color: #c1c1c1;" placeholder="输入用户名或手机号" v-model="user.loginname" />
					</view>
					<view class="inp password">
						<view class="youqige-iconfont icon-mima login-icon"></view>
						<input type="text" password="true" placeholder-style="color: #c1c1c1;" placeholder="输入密码" v-model="user.password"/>
					</view>
					<!-- <image class="login-btn" src="../../static/login-btn.png" @tap="trunToIndex"></image> -->
					<button type="primary" hover-class="button-hover" class="login-btn" @tap="trunToIndex">登录</button>
					<!-- 记住密码 -->
					<view class="remember-psw">
						<checkbox-group>
							<label><checkbox value="psw" :checked='rememberPsw' @tap="rememberPsw =! rememberPsw" color="#09CC86"/>记住账号密码</label>
						</checkbox-group>
					</view>
					<view class="login-tip">
						<text @tap="turnToForget">忘记密码</text><text>|</text><text @tap="turnToRegister">立即注册</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: {
					loginname: '',
					password: ''
				},
				rememberPsw: true
			}
		},
		mounted() {
			let that = this;
			//页面加载完成,获取本地存储的用户名及密码
			const userName = uni.getStorageSync('userName');
			const userPsw = uni.getStorageSync('userPsw');
			if(userName && userPsw){
				that.user.loginname = userName;
				that.user.password = userPsw;
			}else{
				that.user.loginname = "";
				that.user.password = "";
			}
			
		},
		methods: {
			//跳转到忘记密码
			turnToForget() {
				uni.navigateTo({url: '../forget/forget'});
			},
			//跳转到注册
			turnToRegister() {
				uni.navigateTo({url: '../register/register'});
			},
			trunToIndex(){
				const that = this;
				 
				uni.showLoading({title:'努力登录中...', mask:true});
				that.$api.login(that.user, (msg)=>{
					if(msg){
						uni.showToast({title: msg, icon:'none'});
					} else {
						//登录成功获取用户信息
						that.$api.getUserInfo(function(msg){
							uni.hideLoading();
							if(msg){
								uni.showToast({title: msg, icon: 'none'});
							} else {
								uni.redirectTo({url: '../index/index'});
							}
						});
						
						//登录成功将用户名密码存储到用户本地
						if(that.rememberPsw){//用户勾选“记住密码”
							uni.setStorageSync('userName', that.user.loginname);
							uni.setStorageSync('userPsw',  that.user.password);
						}else{//用户没有勾选“记住密码”
							uni.removeStorageSync('userName');
							uni.removeStorageSync('userPsw');
							that.user.loginname = "";
							that.user.password = "";
						}
					}
				})
			}
		}
	}
</script>

实现的效果是:当我们勾选“记住用户名密码”的时候,登录之后,就会在本地存储用户名密码,如果登录的时候没有勾选“记住用户名密码”,就会清除之前本地存储的用户名及密码,并且页面用户名和密码置空

效果图

  • 18
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
uni-app中,记住密码功能是通过缓存实现的。当用户第一次登录时,可以选择勾选记住密码的选项,此时登录信息(包括账号和密码)会被存入缓存中。之后,用户再次打开登录页面时,如果缓存中存在登录信息,则自动填充账号和密码字段,实现记住密码功能。这样,用户就可以方便地登录而无需重复输入账号和密码。引用中提到,第一次登录输入账号密码默认是勾选记住账号密码的,登录会将账号密码存入缓存。同时,引用中提到,在安卓端南工认证apk中,也内置了记住账号密码功能。这些说明了uni-app记住密码实现方式。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [uni-app 实现记住账号密码功能](https://blog.csdn.net/qq_45978154/article/details/125886484)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [南京工业大学校园网登录认证APP](https://download.csdn.net/download/weixin_53590315/86824291)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值