アカウントとパスワードを記憶する機能を実現するVueの考え方とプロセス

<el-form :model="ログインフォーム" :rules="ルール" ref="ログインフォーム" label-width="100px" class="ログインフォーム デモルールフォーム">
  <!-- アカウント -->
  <el-form-item label="アカウント" prop="ユーザーID" オートコンプリート="オン">
    <el-input v-model="loginForm.userId" placeholder="アカウント番号を入力してください"></el-input>
  </el-form-item>
  <!-- パスワード -->
  <el-form-item label="パスワード" prop="パスワード">
    <el-input type="password" v-model="loginForm.password" placeholder="パスワードを入力してください" @keyup.enter="submitForm('loginForm')"></el-input>
  </el-form-item>
  <div class="tip">
    <!-- 記憶する -->
    <el-checkbox v-model="checked" class="rememberMe">ログイン情報を記憶する</el-checkbox>
    <!-- パスワードを取得 -->
    <el-button type="text" @click="open()" class="forgetPw">パスワードを忘れましたか? </el-button>
  </div>
  <!-- ログイン -->
  <el-form-item>
    <el-button type="primary" @click="submitForm('loginForm')" class="submit-btn">ログイン</el-button>
  </el-form-item>
</el-form>

//npm install --save js-base64 をインストールします
//const Base64 = require("js-base64").Base64 を導入する

エクスポートデフォルト{
  データ（） {
    戻る {
      ログインフォーム: {
        ユーザーID： ""、
        パスワード: "",
      },
      チェック済み: false、
    };
  },
  マウント() {
    ユーザー名を localStorage.getItem("userId"); とします。
    if (ユーザー名) {
      this.loginForm.userId = localStorage.getItem("userId");
      this.loginForm.password = Base64.decode(localStorage.getItem("password")); // base64 復号化 this.checked = true;
    }
  },
  メソッド: {
    送信フォーム(フォーム名) {
      this.$refs[formName].validate((valid) => {
        （有効）の場合{
          /* ------ アカウントとパスワードの保存 ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64 暗号化 localStorage.setItem("userId", this.loginForm.userId);
            localStorage.setItem("パスワード", パスワード);
          } それ以外 {
            localStorage.removeItem("ユーザーID");
            localStorage.removeItem("パスワード");
          }
          /* ------ http ログイン要求 ------ */
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    },
  },
};

エクスポートデフォルト{
  データ（） {
    戻る {
      ログインフォーム: {
        ユーザーID： ""、
        パスワード: "",
      },
      チェック済み: false、
    };
  },
  マウント() {
    Cookie を取得します。
  },
  メソッド: {
    送信フォーム(フォーム名) {
      this.$refs[formName].validate((valid) => {
        （有効）の場合{
          /* ------ アカウントとパスワードの保存 ------ */
          if (this.checked) {
            let password = Base64.encode(this.loginForm.password); // base64 暗号化 this.setCookie(this.loginForm.userId, password, 7);
          } それ以外 {
            this.setCookie("", "", -1); // 両方の値を空にし、日数をマイナス 1 日に変更します}
          /* ------ http ログイン要求 ------ */
        } それ以外 {
          console.log("送信エラー!!");
          false を返します。
        }
      });
    },
    
    // クッキーを設定する
    setCookie(ユーザーID、パスワード、日数) {
      let date = new Date(); // 時間を取得 date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days); // 保存する日数 // ​​文字列連結クッキー
      ウィンドウ.ドキュメント.クッキー =
        "userId" + "=" + userId + ";path=/;expires=" + date.toGMTString();
      ウィンドウ.ドキュメント.クッキー =
        "パスワード" + "=" + パスワード + ";path=/;expires=" + date.toGMTString();
    },
    
    // クッキーを読み取り、ユーザー名とパスワードを入力ボックスにエコーします getCookie() {
      ドキュメントのCookieの長さが0より大きい場合
        let arr = document.cookie.split("; "); //独立した「キー=値」形式に分割します for (let i = 0; i < arr.length; i++) {
          let arr2 = arr[i].split("="); // 再度分割します。arr2[0] はキー値、arr2[1] は対応する値です。
          (arr2[0] === "ユーザーID") {
            this.loginForm.userId = arr2[1];
          } そうでなければ (arr2[0] === "パスワード") {
            this.loginForm.password = Base64.decode(arr2[1]); // base64復号化 this.checked = true;
          }
        }
      }
    },
  },
};