基于uniapp实现登录记住密码功能

小小前端~

已于 2024-05-13 16:14:44 修改

阅读量151

点赞数 1

文章标签：前端 javascript 开发语言

于 2024-05-13 16:14:26 首次发布

本文链接：https://blog.csdn.net/zsj702177/article/details/138807607

版权

基于uniapp实现登录记住密码功能

<template>
	<view class="normal-login-container">
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<!-- //记住密码 -->
			<view style="margin: 5px auto;">
				<u-checkbox-group><u-checkbox :checked="rememberPsw" v-model="rememberPsw" shape="circle" 					@change="saveps()" label="记住账号密码"></u-checkbox></u-checkbox-group>
			</view>
            <!-- //记住密码 -->
			<view class="action-btn"><button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rememberPsw: false,
			loginForm: {
				username: '',
				password: '',
				code: '',
				uuid: ''
			}
		};
	},
	created() {
		//页面加载完成，获取本地存储的账号及密码
		const Phone = uni.getStorageSync('Phone'); 
		const userPwd = uni.getStorageSync('userPwd');
		const rememberPsw1 = uni.getStorageSync('rememberPsw');
        //若三个都有就进行赋值，没有就初始化
		if (Phone && userPwd && rememberPsw1) {
			this.loginForm.username = Phone;
			this.loginForm.password = userPwd;
			this.rememberPsw = rememberPsw1;
		} else {
			this.loginForm.username = '';
			this.loginForm.password = '';
			this.rememberPsw = false;
		}
	},
	methods: {
        //根据选项按键来决定是否在本地存储账号密码
		saveps() {
			this.rememberPsw = !this.rememberPsw;
			this.setPsw();
		},
		//记住密码操作
		setPsw() {
			if (this.rememberPsw) {
				uni.setStorageSync('Phone', this.loginForm.username);
				uni.setStorageSync('userPwd', this.loginForm.password);
				uni.setStorageSync('rememberPsw', this.rememberPsw);
			} else {
				uni.removeStorageSync('Phone');
				uni.removeStorageSync('userPwd');
				uni.removeStorageSync('rememberPsw');
				this.loginForm.Phone = '';
				this.loginForm.userPwd = '';
			}
		},
	}
};
</script>