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

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

問題の説明

プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この記事では、主にCookieを使用した書き込み方法を記録しています。私が書いたコメントは非常に詳細です。私が書いたコメントの手順は非常に詳細であるため、ぜひご覧ください。実証された有効性

HTML部分

コード図

効果図

コードを貼り付ける

      <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>

js部分

エクスポートデフォルト{
 名前: "ログイン",
 データ() {
  戻る {
   形状: {
    ユーザー名: ''、
    ログインパスワード: ''、
   },
   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日に設定する},
 },
};

クッキー保存図

要約する

実は、これは非常に簡単です。クッキーの有効期限、つまり有効期限が切れる日付を設定するだけです。もちろん、途中でいくつかのフォーマット処理とデータ処理が必要になります。

また、クッキーはブラウザ内に存在し、ブラウザはコンピュータ内のCドライブなどにインストールされているため、クッキーはCドライブ内のフォルダに保存されます。そのフォルダにはクッキーだけでなく、localStorage、sessionStorageなどが含まれています。具体的なフォルダは自分で探すことができます。実際のところ、いわゆるローカル ストレージは、自分のコンピューター上に存在します。

これで、vue ログインページで Cookie を使用して 7 日間パスワードを記憶する方法についての記事は終了です。vue ログインページで Cookie を使用してパスワードを記憶する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • PHP クッキーの動作原理と例の説明
  • Cookieを操作するPython Seleniumインスタンスメソッド
  • Python クローラーはリクエスト ライブラリを使用して Cookie を処理します
  • Cookie 認証を使用した ASP.NET Core サンプル コード
  • クッキーの動作原理と応用の詳細な説明

<<:  Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策

>>:  MySQLテーブル名の大文字と小文字を区別しない設定方法の詳細な説明

推薦する

Linux の who コマンド例の紹介

誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...

docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析

Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...

CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順

1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

MySQL (5.6 以下) の JSON 解析の詳細な例

MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...

Linux 最速のテキスト検索ツール ripgrep (grep の最良の代替)

序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...

Mysql の使用法の概要

導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...

Flask と Vue のフロントエンドとバックエンドを分離したプロジェクト展開のサンプル コード

以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

Vueページの初回読み込み最適化の全プロセス

目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...

Web開発で使用される基本的な概念と技術の紹介

本日は、Web 開発で使われる基本的な概念と技術を初心者向けに紹介します。A から Z まで合計 2...

LinuxでifconfigとaddrがIPアドレスを表示できない問題を解決する

1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...

Docker 階層化パッケージを使用して Spring Boot を設定する方法

Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

Vue で @person 関数を実装する方法

この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...