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

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

実装のアイデア

ユーザーがログイン時に「ログイン情報を記憶する」オプションをチェックすると、ログイン名とパスワード (暗号化済み) がローカル キャッシュに保存されます。次回ログイン ページが読み込まれると、保存されたアカウントとパスワード (復号化が必要) が自動的に取得され、ログイン入力ボックスに反映されます。

アカウント パスワードを保存する方法は 3 つあります。

1. sessionStorage(非推奨)

1) 現在のセッションでのみ有効で、ブラウザ ウィンドウを閉じるとクリアされます。

2). 保存データサイズは通常5MBです

3) サーバーとの対話型通信は行わない

2. ローカルストレージ

1) localStorage 内の情報を積極的にクリアしない限り、その情報は常に存在し、ブラウザ ウィンドウを閉じて次回起動したときにも存在し続けます。

2). 保存データサイズは通常5MBです

3) サーバーとの対話型通信は行わない

3. クッキー

1) 有効期限を手動で設定することができ、有効期限を過ぎると無効になります。有効期限は設定されておらず、ブラウザウィンドウを閉じるとクリアされます。

2) 保存データサイズは一般的に4K

3) 各リクエストはサーバーに送信されます

ここでは主に2番目と3番目の使用方法を紹介します。

機能インターフェース

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

アカウントとパスワードを記憶する機能の具体的な実装

パスワードの暗号化

セキュリティを強化するには、パスワードを保存する前に暗号化する必要があります。利用できる暗号化方式は多数あります。ここでは base64 を選択しました。

npm インストール base64 依存関係

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

要約する

これで、Vue にログインとパスワード記憶機能を実装するアイデアとプロセスに関するこの記事は終了です。Vue にログインとパスワード記憶機能を実装する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 学習ロード ログイン登録サンプルコード
  • Vue.jsは、ユーザーコメント、ログイン、登録、情報変更機能を実装します。
  • vueログイン登録例の詳しい説明
  • Vue に登録してログイン状態を維持する方法
  • Vue でログインと登録テンプレートを実装するためのサンプルコード

<<:  HTML 選択タグにおける単一選択と複数選択の詳細な説明

>>:  Jenkinsはマイクロサービスをパッケージ化してDockerイメージを構築し、実行します。

推薦する

vue-cli を使用してプロジェクトを作成し、webpack でパッケージ化する方法

1. 環境を準備する(Node.jsをダウンロードし、環境変数を設定する) 2. vue-cliをグ...

ReactJs 基礎チュートリアル - 基本編

目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...

プロセスごとにネットワーク帯域幅を監視する Linux ツール Nethogs のインストールと展開

概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...

CentOS に Memcached と PHP Memcached 拡張機能をインストールする

高性能分散メモリオブジェクトキャッシュシステムMemcachedについては、別の記事「Windows...

ページにデータを表示するReactメソッド

目次親コンポーネントリストボックスリストコンポーネントボタンコンポーネント PageButton昨年...

MySQL <> および <=> 演算子の紹介

<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説

最近のプロジェクトでは、ポイントを集める効果を作成する必要があります。 ボスの説明によると、この効果...

ホームページのデザインはウェブデザイナーのレベルを最もよく反映する

私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...

MySQLストレージエンジンについて学びましょう

目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...

uni-app で scss を使用するサンプル コード

遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...

ReactはExcelファイルのインポートとエクスポートを実装します

目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...

左右の幅を固定し、中央の幅を適応させたHTMLレイアウトのソリューションの詳細な説明

この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...