vue の cookie と crypto-js がパスワードを暗号化して記憶する方法

この章では、vue で cookie と crypto-js を使用してパスワードを暗号化して記憶する方法を紹介します。必要な方は参考にしていただければ幸いです。

crypto-js を使用して暗号化と復号化を行う

最初のステップは

npm install crypto-js

をインストールすることです。2 番目のステップは vue コンポーネントに

import CryptoJS from "crypto-js";

をインポートすることです必要な手順は 3 つあります。

    // 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 は文字列であることに注意してください。ユーザー ID (数値タイプ) を暗号化する場合は、まず文字列

に変換する必要があります。

その他の用途 公式ドキュメントを参照してください

パスワードを記憶する

1. 実装原則は、ログイン時に「パスワードを記憶する」がチェックされている場合 (「パスワードを記憶する」を保存する)です。 ' status to localstorage ) アカウントのパスワードを cookie に保存します;

2. ログイン ページに入るときに、パスワードが記憶されているかどうか (localstorage から判断) を判断し、パスワードが記憶されている場合は、 Cookie をフォームにエクスポートします。

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 => {
          //----
        });
    },

最後に、ユーザーが作成した Dog サブディレクトリのパスワードを覚えているかどうかを判断する必要があります。関連する操作を実行する関数

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

最後に、インターフェイスが貼り付けられます。ここで、rememberPsw はパスワードを記憶するボタンの v-model 値、currentPortId は最初のボックスの v-model 値、password は v です。 -2 番目のボックスのモデル値。

以上がvue の cookie と crypto-js がパスワードを暗号化して記憶する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。