本项目专注于实现一个具备“记住密码”功能的Vue登录页面，提升用户体验与安全性。通过本地存储技术自动保存用户信息，简化下次登录流程。
在Vue项目中实现登录页的“记住密码”功能需要以下步骤：
1. 安装jsencrypt插件用于加密解密操作：
```
npm install jsencrypt --save-dev
```
2. 在`src/utils/jsencrypt.js`文件中引用所需的jsencrypt库。
3. 登录页面代码如下所示，包含对Cookies的使用和密码加密功能：
```javascript
import Cookies from js-cookie;
import { encrypt, decrypt } from @/utils/jsencrypt;
// 获取cookie中的用户名、密码及rememberMe状态，并将其设置为loginForm的初始值。
this.getCookie();
getCookie() {
const username = Cookies.get(username);
const password = Cookies.get(password);
const rememberMe = Boolean(Cookies.get(rememberMe));
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
password: password === undefined ? this.loginForm.password : decrypt(password),
rememberMe: rememberMe
};
}
// 在登录按钮点击事件中，根据用户选择是否记住密码来设置或清除cookie。
if (this.loginForm.rememberMe) {
Cookies.set(username, this.loginForm.username, { expires: 30 });
Cookies.set(password, encrypt(this.loginForm.password), { expires: 30 });
Cookies.set(rememberMe, true, { expires: 30 }); // 记住用户的选择
} else {
Cookies.remove(username);
Cookies.remove(password);
}
```
这样，当页面加载时会根据cookie中的信息自动填充用户名和密码（如果启用了记住我功能）。同时，在点击登录按钮后也会依据用户的设置来保存或移除这些数据。
5星
