vue登录页实现使用cookie记住7天密码功能的方法
问题描述 项目的登录页中，会有要求记住7天密码的功能，本篇文章记录一下写法，主要是使用cookie，注释我写的很详细了，大家可以看一下我写的注释的步骤，还是比较详细的。亲测有效 html部分 代码图示 效果图示 代码粘贴 <el-form ref="form" :model="form" label-width="80px" label-position="top" @submit.native.prevent > <el-form-item label="用户名/账号"> <div cla
在Vue.js应用中实现登录页面的“记住密码”功能，主要涉及到前端的用户交互和数据持久化。本文将详细介绍如何利用Cookie来实现这一功能。在登录界面，用户可以选择记住密码，以便在接下来的7天内自动填充登录信息，提高用户体验。
1. **HTML部分**：
在HTML模板中，我们需要一个复选框让用户选择是否记住密码。同时，我们还需要两个输入框分别用于输入用户名和密码。`el-form`和`el-input`组件来自于Element UI库，用于构建表单。`el-checkbox`用于创建复选框，`v-model`双向绑定数据，`isRemember`属性表示复选框是否被选中。
```html
<el-form ref="form" :model="form" label-width="80px" label-position="top" @submit.native.prevent>
<el-form-item label="用户名/账号">
<div class="userError">
<el-input size="mini" v-model.trim="form.userName" clearable></el-input>
</div>
</el-form-item>
<el-form-item label="密码">
<div class="pwdError">
<el-input size="mini" v-model.trim="form.loginPwd" clearable show-password></el-input>
</div>
</el-form-item>
<el-checkbox label="记住账号" v-model="isRemember"></el-checkbox>
<el-button native-type="submit" size="mini" @click="loginPage">登录</el-button>
</el-form>
```
2. **JavaScript部分**：
在JavaScript中，我们需要处理复选框状态改变以及登录按钮的点击事件。在`mounted()`生命周期钩子中，我们检查Cookie中是否有已记住的用户名和密码。然后在`methods`对象中定义`loginPage()`函数，这个函数负责处理登录逻辑。
```javascript
export default {
name: "login",
data() {
return {
form: {
userName: '',
loginPwd: '',
},
isRemember: false,
};
},
mounted() {
this.getCookie();
},
methods: {
async loginPage() {
const res = await this.$api.loginByUserName(this.form);
if (res.isSuccess === false) {
this.$message.error("登录错误");
} else {
const self = this;
if (self.isRemember === true) {
// 设置Cookie，保存用户名、密码和有效期
self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
// 通常我们将设置7天过期时间
// self.setCookie(this.form.userName, this.form.loginPwd, 7);
} else {
// 如果未勾选记住密码，清除Cookie
self.clearCookie();
}
// 跳转路由或执行其他登录成功后的操作
// ...
}
},
// 获取Cookie
getCookie() {
// 实现代码...
},
// 设置Cookie
setCookie(name, value, days) {
// 实现代码...
},
// 清除Cookie
clearCookie() {
// 实现代码...
},
},
};
```
3. **Cookie操作**：
`getCookie()`、`setCookie()`和`clearCookie()`是处理Cookie的核心方法。`getCookie()`用于获取特定名称的Cookie值；`setCookie()`用于设置Cookie，包括名称、值和过期时间；`clearCookie()`用于删除指定名称的Cookie。这些方法需要根据浏览器API实现，例如使用`document.cookie`进行操作。
```javascript
// 获取Cookie
getCookie(name) {
var cookieArr = document.cookie.split(";");
for (var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
if (decodeURIComponent(cookiePair[0].trim()) === name) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
// 设置Cookie
setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
// 清除Cookie
clearCookie(name) {
setCookie(name, "", -1);
}
```
以上就是使用Vue.js和Cookie实现登录页面记住7天密码功能的详细步骤。通过监听用户的选择，我们可以根据需要存储或清除Cookie，从而达到记住密码的效果。需要注意的是，这种做法虽然方便了用户，但也可能带来安全风险，因此在实际应用中需要权衡安全性和便利性。
