前言
文中分为两个方面，一个是uniapp小程序，一个是vue2前端（vue3其实同理，只不过格式稍有不同而已）
初始界面（以vue2的界面为例）
加入按钮之后，界面如下：
1. uniapp
整一个按钮框：
<!-- 记住账号密码 -->
<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同理
mounted(){
// 检查本地存储中是否有记住的用户名和密码
const savedUsername = uni.getStorageSync('userName');
const savedPassword = uni.getStorageSync('userPsw');
if (savedUsername && savedPassword) {
this.username = savedUsername;
this.password = savedPassword;
this.remember = true;
}
},
以及数据的初始化：
data() {
return {
rememberPsw: true, // 默认记住密码
}
},
对应的methods核心方法如下：
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也可提供给各位：
<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中读取保存的账号密码，并填充到表单中
复选框的按钮如下：
<el-form-item>
<el-checkbox v-model="rememberMe">{{$t('login.rememberMe')}}</el-checkbox>
</el-form-item>
对应的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');
}
}
};
清除凭据：在用户退出登录或选择不记住密码时，确保清除存储的凭据，以确保安全性
