Vue ログインページでクッキーを使用してパスワードを 7 日間記憶する方法

      <el-フォーム
       ref="フォーム"
       :model="フォーム"
       ラベル幅="80px"
       ラベル位置="上"
       @submit.native.prevent
      >
       <el-form-item label="ユーザー名/アカウント">
        <div class="userError">
         <el-入力
          サイズ="ミニ"
          v-model.trim="フォーム.ユーザー名"
          クリア可能
         </el-input> ...
        </div>
       </el-form-item>
       <el-form-item label="パスワード">
        <div class="pwdError">
         <el-入力
          サイズ="ミニ"
          v-model.trim="フォーム.ログインパスワード"
          クリア可能
          パスワードを表示
         </el-input> ...
        </div>
       </el-form-item>
       <el-checkbox label="アカウントを記憶する" v-model="isRemember"></el-checkbox>
       <el-button native-type="submit" size="mini" @click="ログインページ"
        >ログイン</el-button
       >
      </el-form>

エクスポートデフォルト{
 名前: "ログイン",
 データ（） {
  戻る {
   形状： {
    ユーザー名: ''、
    ログインパスワード: ''、
   },
   isRemember: false、
  };
 },
 マウント() {
  // ステップ 1、ページが読み込まれたら、まず Cookie にユーザー名とパスワードがあるかどうかを確認します。これは this.getCookie(); で使用できます。
 },
 メソッド: {
  /* ステップ 3、ユーザーがログインするときに、まずユーザー名とパスワードが正しいかどうかを確認します。正しくない場合は、ログイン エラーを表示します。正しい場合は、ユーザーがパスワードを記憶するチェックをしたかどうかを確認します。そうでない場合は、時間内に Cookie をクリアして初期状態に戻ります。チェックした場合は、ユーザー名とパスワードを Cookie に保存し、7 日間の使用有効期間を設定します (もちろん、更新前の Cookie 時間でもかまいません)
  */
  非同期ログインページ() {
   // ユーザーが入力したユーザー名とパスワードが正しいかどうかを確認するためのリクエストを送信します。const res = await this.$api.loginByUserName(this.form)
   res.isSuccess == falseの場合{
    this.$message.error("ログインエラー")
   }
   それ以外{
    const self = this;
    // ステップ 4、チェックボックスがオンになっている場合は、set cookie メソッドを呼び出して、現在のユーザー名、パスワード、有効期限を cookie に保存します。if (self.isRemember === true) {
     // アカウント名、パスワード、保存日数 (有効期限) を 3 つのパラメータとして渡します // 1/24/60 テストは 1 分間テストできます。これはより明白です self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
     // self.setCookie(this.form.userName, this.form.loginPwd, 7); // 7日後に有効期限が切れます} 
    // チェックされていない場合は、この Cookie が期限切れでない最後の Cookie である可能性があるため、時間内に Cookie をクリアする必要があります。そうでない場合は {
     自己Cookieをクリアします。
    }
    // もちろん、ユーザーがクッキーをチェックしたかどうかに関係なく、ルートはリダイレクトされます this.$router.push({
     名前: "プロジェクト",
    });
   }
  },
  // クッキーを設定する
  setCookie(ユーザー名、パスワード、exdays) {
   var exdate = new Date(); // 現在のログイン時刻を取得しますexdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 現在のログイン時刻に 7 日を追加して、保存する日数である Cookie の有効期限を取得します。 // Cookie は name=value の形式で保存されるため、文字列連結 Cookiewindow.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "userPwd" + "=" + パスワード + ";path=/;expires=" + exdate.toGMTString();
   window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();
  },
  // ステップ 2、クッキーにユーザー名とパスワードがある場合は、2 回切り取られてフォームに保存され、使用されます。そうでない場合は、getCookie: function () {
   ドキュメントのCookieの長さが0より大きい場合
    var arr = document.cookie.split("; "); //配列なので切り取る必要があります。これを印刷するとわかります // console.log(arr,"cut");
    (var i = 0; i < arr.length; i++) の場合 {
     var arr2 = arr[i].split("="); // 再度分割 // console.log(arr2,"Split 2");
     // // 対応する値をチェックする if (arr2[0] === "userName") {
      this.form.userName = arr2[1]; // ユーザー名とパスワードのコピーを保存します} else if (arr2[0] === "userPwd") {
      this.form.loginPwd = arr2[1]; // 復号可能} else if (arr2[0] === "isRemember") {
      this.isRemember = ブール値(arr2[1]);
     }
    }
   }
  },
  // クッキーを消去する
  clearCookie: fu![画像](/img/bVcOHhz)
   this.setCookie("", "", -1); // クリアして日数をマイナス1日に設定する},
 },
};