vue의 쿠키와 crypto-js가 비밀번호를 암호화하고 기억하는 방법

이 장에서는 Vue에서 쿠키와 crypto-js를 사용하여 비밀번호를 암호화하고 기억하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

crypto-js를 사용하여 암호화하고 해독하세요.

첫 번째 단계에서는

npm install crypto-js

를 설치하고, 두 번째 단계에서는 필요한 vue 구성 요소에

import CryptoJS from "crypto-js";

를 가져옵니다. 세 번째 단계에서는

    // Encrypt 加密 
    var cipherText = CryptoJS.AES.encrypt(
      "my message",
      "secretkey123"
    ).toString();
    console.log(cipherText)
    // Decrypt 解密
    var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
    var originalText = bytes.toString(CryptoJS.enc.Utf8);
    console.log(originalText); // 'my message'

mymessage가 문자열이라는 점에 유의하세요. , if 암호화하려는 사용자 ID(숫자형)를 먼저 문자열로 변환해야 합니다

자세한 내용은 공식 문서를 참조하세요

비밀번호 기억하기

1. 구현 원칙은 로그인 시, 비밀번호 기억이 체크되어 있고('비밀번호 기억' 상태를 로컬스토리지에 저장) 계정 비밀번호를 쿠키에 저장합니다.

2. 나중에 로그인 페이지에 들어갈 때 비밀번호를 기억했는지 확인하세요(로컬스토리지에 판단). 비밀번호를 기억하고, 쿠키를 양식으로 내보냅니다. ;

setcookie 메소드를 사용하여 저장하고, getcookie 메소드를 사용하여 검색합니다.
자,

//设置cookie
    setCookie(portId, psw, exdays) {
      // Encrypt，加密账号密码
      var cipherPortId = CryptoJS.AES.encrypt(
        portId+'',
        "secretkey123"
      ).toString();
      var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
      console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功

      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
      window.document.cookie =
        "currentPortId" +
        "==" +
        cipherPortId +
        ";path=/;expires=" +
        exdate.toGMTString();
      window.document.cookie =
        "password" +
        "==" +
        cipherPsw +
        ";path=/;expires=" +
        exdate.toGMTString();
    },
    //读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
        for (var i = 0; i  메소드를 작성해 보겠습니다. <p></p><pre class="brush:php;toolbar:false"> login() {
      this.$http //请根据实际情况修改该方法
        .post(...)
        .then(res => {
          if (res.data.code == "success") {
            if (this.rememberPsw == true) {
               //判断用户是否勾选了记住密码选项rememberPsw，传入保存的账号currentPortId，密码password，天数30
              this.setCookie(this.currentPortId, this.password, 30);
            }else{
              this.clearCookie();
            }
            //这里是因为要在created中判断，所以使用了localstorage比较简单，当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
            localStorage.setItem("rememberPsw", this.rememberPsw);
            
          } else {
           //----
          }
        })
        .catch(err => {
          //----
        });
    },

로그인 방법은 다음과 같습니다.

//判断是否记住密码
//**注意这里的true是字符串格式，因为Boolean存进localstorage中会变成String**
 created() {
    //判断是否记住密码
    if (localStorage.getItem("rememberPsw") == 'true') {
      this.getCookie();
    }
  }

마지막으로, 관련 작업을 수행하려면 생성된 개 하위 함수에서 사용자가 비밀번호를 기억했는지 확인해야 합니다.

rrreee

마지막으로, 인터페이스가 붙여넣어졌습니다. 여기서 RememberPsw는 비밀번호 버튼의 v-model 값을 기억하고, currentPortId는 첫 번째 상자의 v-model 값이고, 비밀번호는 두 번째 상자의 v-model 값입니다.

🎜

위 내용은 vue의 쿠키와 crypto-js가 비밀번호를 암호화하고 기억하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!