Vue中登录页面记住密码，并使用crypto-js加密

主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：Vue中使用js-cookie_~疆的博客-CSDN博客_vue安装js-cookie

 一、下载js-cookie

cnpm i -S js-cookie

二、main.js中全局引入

import Cookies from 'js-cookie'
Vue.prototype.$cookie = Cookies;

三、使用

<el-checkbox v-model="rememberPassword">记住密码</el-checkbox>

如果登录成功，再判断是否已经勾选【记住密码】，如果勾选了，则存储用户名和密码，如果没有勾选，则清除掉用户名和密码的cookie

if (this.rememberPassword) {
  this.$cookie.set("username", this.loginForm.username, {
    expires: 30,
  });
  this.$cookie.set("password", this.loginForm.password, {
    expires: 30,
  });
} else {
  this.$cookie.remove("username");
  this.$cookie.remove("password");
}

当进入登录页面时，在mounted钩子函数中获取cookie中的用户名和密码，赋给表单即可

  mounted() {
    this.loginForm.username = this.$cookie.get("username");
    this.loginForm.password = this.$cookie.get("password");
  }

注意：为了安全起见，通常存储在cookie中的密码需要加密，这里使用crypto-js

四、密码加密

1、下载crypto-js：

cnpm i -S crypto-js

2、局部引用

import CryptoJS from "crypto-js";

3、加密

注意：下面的第二个参数为密钥，这里我设置为123456

CryptoJS.AES.encrypt(password, "123456") 

4、解密

CryptoJS.AES.decrypt(password,"123456").toString(CryptoJS.enc.Utf8)

最后在项目中的应用：

<template>
  <div>
      <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
      <el-button @click="handleLogin">立即登陆</el-button>
  </div>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
  name: "Login",
  data() {
    return {
      rememberPassword: true,
      loginForm: {
        username: "",
        password: ""
      }
    };
  },
  mounted() {
    this.getCookie();
  },
  methods: {
    getCookie() {
      this.loginForm.username = this.$cookie.get("username");
      if (this.$cookie.get("password")) {
        this.loginForm.password = CryptoJS.AES.decrypt(
          this.$cookie.get("password"),
          "123456"
        ).toString(CryptoJS.enc.Utf8);
      } else {
        this.loginForm.username = "";
      }
    },
    handleLogin() {
            if (code == 200) {
              if (this.rememberPassword) {
                this.$cookie.set("username", this.loginForm.username, {
                  expires: 3
                });
                this.$cookie.set(
                  "password",
                  CryptoJS.AES.encrypt(this.loginForm.password, "123456"),
                  {
                    expires: 3
                  }
                );
              } else {
                this.$cookie.remove("username");
                this.$cookie.remove("password");
              }
            }
    }
  }
};
</script>

此外，还有md5摘要算法处理密码：

MD5是摘要算法，用于对消息生成定长的摘要。消息不同，生成的摘要就不同，因此可用于验证消息是否被修改。生成摘要是单向过程，不能通过摘要得到原始的消息。如果用于密码保护，其优点是保存密码的摘要，无法获得密码的原文。AES是一种对称加密算法，对原文加密后得到密文，通过密钥可以把密文还原成明文。用于密码保护时，有可能对密文实施破解，获得密码的明文，所以其安全性比MD5低。

    MD5是一种单向加密，它的加密不可逆，它将任意长度的字符串，经过算法计算后生成固定长度的数据，一般为16位表示。

MD5的用途：

    1. 消息完整性：每份数据生成的MD5码不同，所以可以吧MD5码和数据一块发送，在对端使用MD5加密对数据加密在与接收的MD5码做对比，保证数据的正确性。

    2. 安全访问认证：常被用到 mysql和传递用户账户信息和密码，从用户端发送到服务器的只是一段128位的摘要，服务器拿到后直接将其存入数据库，下次登录只需与服务器的密文进行对比即可，这样保护了用户的信息，即便是后台人员也无法去获取用户的账户密码。

下载：cnpm i -S blueimp-md5

引入：const md5 = require('blueimp-md5')

使用：md5（password）

 

Vue3中记住密码功能