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テーブル名の大文字と小文字を区別しない設定方法の詳細な説明

ブログ    

推薦する

Nginxはドメイン名のアクセス方法を定義しています

最近Nginxを構築しているのですが、ドメイン名でアクセスできません。 nginx 構成ファイル n...

React でカレンダー コンポーネントを構築するためのステップ バイ ステップ ガイド

目次事業背景テクノロジーの活用技術的な問題デザインのアイデア😱 困惑と苦痛に満ちた顔🙄考え始める🌲デ...

HTML ページに SVG を挿入する複数の方法

SVG (Scalable Vector Graphics)は、XML 構文に基づいた画像形式です。...

Vueはechartを使用してラベルと色をカスタマイズします

この記事では、参考までに、echartを使用してタグと色をカスタマイズするVueの具体的なコードを紹...

Win10にmysql8.0.15 winx64をインストールしてサーバーに接続する際に問題が発生しました

1. mysql-8.0.15をダウンロード、インストール、設定する1. 公式サイト (https:...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

VueのVuexの4つの補助機能について

目次1. 補助機能2. 例1. mapState と mapGetters 2. mapMutati...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

ログインインターセプションを実装するためのVueルーティング

目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...

Mysqlのマージ結果と水平スプライシングフィールドの実装手順

序文最近、レポート機能に取り組んでいたのですが、ある月に各部署に入社した人と退職した人の数をカウント...

CentOS仮想マシンの時刻を変更する方法

上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...

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

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

React 手書きタブ切り替え問題

親ファイル React をインポートし、{useState} を 'react' か...

MacOS で Docker を使用して MySQL マスター スレーブ データベースを作成する方法

1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...

データベースを削除せずにMySQLのすべてのテーブルを素早く削除する方法

この記事では、例を使用して、データベースを削除せずに MySQL 内のすべてのテーブルをすばやく削除...