実装のアイデアユーザーがログイン時に「ログイン情報を記憶する」オプションをチェックすると、ログイン名とパスワード (暗号化済み) がローカル キャッシュに保存されます。次回ログイン ページが読み込まれると、保存されたアカウントとパスワード (復号化が必要) が自動的に取得され、ログイン入力ボックスに反映されます。 アカウント パスワードを保存する方法は 3 つあります。1. sessionStorage(非推奨)
2. ローカルストレージ
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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: HTML 選択タグにおける単一選択と複数選択の詳細な説明
>>: Jenkinsはマイクロサービスをパッケージ化してDockerイメージを構築し、実行します。
序文: MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
ウェブサイトの構築を始めたばかりの初心者には、理解し、学ぶべきことがたくさんあります。ウェブサイトを...
目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...
インライン形式<colgroup>...</colgroup>属性名 属性値...
問題の説明 (以下の説明は Windows 環境に限定されます): D:\develop\ide\m...
目次序文1. 新しいVueプロジェクトを作成する2. WebStormの設定1. デバッガポートを設...
404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...
目次クラス void のポイントES6 矢印関数ヴュートファイvue-cli非同期と同期実行と展開ヒ...
1. MYSQLのインストール1. ダウンロードしたMySQLインストールファイルmysql-5.5...
1. Webデザイナーウォール 2. Veerleのブログ 3. チュートリアル9 4. UXブース...
目次1. マウスがカルーセル モジュール上を通過すると、左右のボタンが表示され、モジュールを離れると...
イメージは hub.docker.com に保存できますが、ネットワーク速度が比較的遅いです。内部環...