実装のアイデアユーザーがログイン時に「ログイン情報を記憶する」オプションをチェックすると、ログイン名とパスワード (暗号化済み) がローカル キャッシュに保存されます。次回ログイン ページが読み込まれると、保存されたアカウントとパスワード (復号化が必要) が自動的に取得され、ログイン入力ボックスに反映されます。 アカウント パスワードを保存する方法は 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イメージを構築し、実行します。
1. 環境を準備する(Node.jsをダウンロードし、環境変数を設定する) 2. vue-cliをグ...
目次1. ReactJS の紹介2. ReactJSの理解とReactJSの利点1. ReactJS...
概要Linux 用のオープン ソース ネットワーク監視ツールは数多くあります。たとえば、帯域幅の使用...
高性能分散メモリオブジェクトキャッシュシステムMemcachedについては、別の記事「Windows...
目次親コンポーネントリストボックスリストコンポーネントボタンコンポーネント PageButton昨年...
<> 演算子機能: 等しくないことを示します。注: 「!=」演算子と同じ機能を持ちますが...
async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...
最近のプロジェクトでは、ポイントを集める効果を作成する必要があります。 ボスの説明によると、この効果...
私がこれまで携わってきた多くのプロジェクトでは、基本的に避けられない悪循環がありました。それは、ホー...
目次序文1. MySQL メインストレージエンジン: 2. さまざまなストレージエンジンがテーブルを...
遭遇した落とし穴私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決すること...
目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...
この記事では、次のように、誰にでも共有できる左右幅固定のミドルアダプティブ HTML レイアウトソリ...
1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...