uniapp | vue2 实现用户登录记住账号密码功能（附Demo）

前言

文中分为两个方面，一个是uniapp小程序，一个是vue2前端（vue3其实同理，只不过格式稍有不同而已）

初始界面（以vue2的界面为例）

加入按钮之后，界面如下：

1. uniapp

整一个按钮框：

html 复制代码

<!--	记住账号密码 -->
<view class="remember-psw-container">
    <label class="remember-psw">
        <checkbox 
            value="psw" 
            :checked='rememberPsw' 
            @tap="rememberPsw = !rememberPsw" 
            color="#09CC86"
            class="checkbox"
        />记住账号密码
        <text class="checkbox-label"></text>
    </label>
</view>

其js语法如下：

还需要一个mounted，跟vue2中的created同理

js 复制代码

mounted(){
	// 检查本地存储中是否有记住的用户名和密码
	const savedUsername = uni.getStorageSync('userName');
	const savedPassword = uni.getStorageSync('userPsw');
	if (savedUsername && savedPassword) {
	  this.username = savedUsername;
	  this.password = savedPassword;
	  this.remember = true;
	}
},

以及数据的初始化：

js 复制代码

data() {
	return {
		rememberPsw: true,  // 默认记住密码
	}
},

对应的methods核心方法如下：

js 复制代码

methods: {
	login(){
		if(this.username == null || this.username == ''){
			uni.$u.toast('请输入账号!');
			return false;
		}
		if(this.password == null || this.password == ''){
			uni.$u.toast('请输入密码!');
			return false;
		}
		if(this.captcha == null || this.captcha == ''){
			uni.$u.toast('请输入验证码!');
			return false;
		}
		var password = w_md5.hex_md5_32(this.password);
		uni.$u.http.post('/blade-auth/oauth/token', {
				grant_type:'password',
				username:this.username,
				password:password,
				scope:'all',
				tenantId:'000000'
			}, {
		    header: {
				'Content-Type':"application/x-www-form-urlencoded",
				'Tenant-Id':'000000'
			}, 
		}).then(res => {
			// 核心部分在这里
			// 仅在登录成功后存储账号和密码
			if (this.rememberPsw) {  // 请确保你定义了 rememberPsw 变量
				uni.setStorageSync('userName', this.username);
				uni.setStorageSync('userPsw', this.password); // 此处也不可存储加密之后的密码
			}else {
				// 如果用户未勾选"记住我"，清除本地存储中的用户名和密码
				uni.removeStorageSync('userName');
				uni.removeStorageSync('userPsw');
			}		
			uni.switchTab({
				url:"../index/index",
			})
			return null;
			
		}).catch(err => {
		
		})
	},
}

对应的css也可提供给各位：

css 复制代码

<style lang="scss" scoped>
	.equipment_input{
		margin-top: 1%;
		margin-bottom: 1%;
		border-bottom: 1px solid #d1d1d1;
	}

	// 以下是记住密码的css
	.remember-psw-container {
		display: flex;
		justify-content: flex-end; /* 右对齐 */
		align-items: center; /* 垂直居中 */
		margin-top: 20rpx; /* 可根据需要调整 */
	}

	.remember-psw {
		display: flex;
		align-items: center; /* 垂直居中 */
	}

	.checkbox {
		margin-right: 5rpx; /* 文字与复选框之间的间距 */
	}

	.checkbox-label {
		font-size: 16px; /* 文字大小 */
		color: #333; /* 文字颜色 */
	}

</style>

2. vue2

vue2同理上面的uniapp，只不过个别函数不同而已

要在 Vue2 中实现"记住密码"的功能，可以按照以下步骤进行：

添加勾选按钮 ：

在模板中添加一个复选框用于记住账号密码功能
保存账号密码 ：

在用户勾选"记住密码"时，将账号密码保存到浏览器的 localStorage 或 sessionStorage 中
自动填充 ：

当用户再次访问页面时，从 localStorage 或 sessionStorage 中读取保存的账号密码，并填充到表单中

复选框的按钮如下：

html 复制代码

<el-form-item>
  <el-checkbox v-model="rememberMe">{{$t('login.rememberMe')}}</el-checkbox>
</el-form-item>

对应的js语法如下：（注意注释的说明）

js 复制代码

export default {
  name: "userlogin",
  data() {
    return {
      loginForm: {
          // 其他类型
          rememberMe: true, // 新增的属性
      },
    };
  },
  created() {
    this.loadUserCredentials(); // 加载用户凭据
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
          // 注意此处还有一个小变动
            if (this.loginForm.rememberMe) {
                this.saveUserCredentials(); // 保存用户凭据
              }else {
                this.clearUserCredentials(); // 清除保存的凭据
              }
            this.$router.push({ path: this.tagWel.value });
            loading.close();
          }).catch(() => {
            loading.close();
            this.refreshCode();
          });
        }
      });
    },
    saveUserCredentials() {
      localStorage.setItem('username', this.loginForm.username);
      localStorage.setItem('password', this.loginForm.password);
    },
    loadUserCredentials() {
      const savedUsername = localStorage.getItem('username');
      const savedPassword = localStorage.getItem('password');
      if (savedUsername) {
        this.loginForm.username = savedUsername;
        this.loginForm.password = savedPassword;
        this.rememberMe = true;
      }
    },
      clearUserCredentials() {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
      }
  }
};

清除凭据：在用户退出登录或选择不记住密码时，确保清除存储的凭据，以确保安全性

uniapp | vue2 实现用户登录 记住账号密码 功能（附Demo）

目录

前言

1. uniapp

2. vue2

uniapp | vue2 实现用户登录记住账号密码功能（附Demo）