【前端】登陆页面：记住密码、设置cookie、加密

最新推荐文章于 2024-05-21 00:00:00 发布

karshey

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量890

点赞数 8

分类专栏：前端demo 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/karshey/article/details/136437548

版权

前端demo 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

文章介绍了如何在Vue应用中使用js-cookie库管理和自动填充登录表单中的用户名和密码，同时利用RSA加密和JSEncrypt库进行安全加密存储，保证了30天内的密码安全。

摘要由CSDN通过智能技术生成

将保存在cookie中的密码自动填入表单：库js-cookie

// login.vue
getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },

记住密码，这里期限是30天：

Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });

这里有加密和解密的操作。在线生成RSA的公钥和私钥，使用JSEncrypt库进行加密和解密：

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}