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

你的名字 2021-09-07 19:28 423阅读 0赞

> 主要用到js-cookie来存储用户名和密码，关于js-cookie介绍：[https://blog.csdn.net/qq\_40323256/article/details/116838848][https_blog.csdn.net_qq_40323256_article_details_116838848]

#  一、下载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加密：

下载：**cnpm i -S blueimp-md5**

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

使用：加密密码: **md5（password）**

[https_blog.csdn.net_qq_40323256_article_details_116838848]: https://blog.csdn.net/qq_40323256/article/details/116838848