問題の説明プロジェクトのログインページでは、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 this.setCookie("", "", -1); // クリアして日数をマイナス1日に設定する}, }, }; クッキー保存図 要約する実は、これは非常に簡単です。クッキーの有効期限、つまり有効期限が切れる日付を設定するだけです。もちろん、途中でいくつかのフォーマット処理とデータ処理が必要になります。 また、クッキーはブラウザ内に存在し、ブラウザはコンピュータ内のCドライブなどにインストールされているため、クッキーはCドライブ内のフォルダに保存されます。そのフォルダにはクッキーだけでなく、localStorage、sessionStorageなどが含まれています。具体的なフォルダは自分で探すことができます。実際のところ、いわゆるローカル ストレージは、自分のコンピューター上に存在します。 これで、vue ログインページで Cookie を使用して 7 日間パスワードを記憶する方法についての記事は終了です。vue ログインページで Cookie を使用してパスワードを記憶する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu 16.04.4LTS に mininet をインストールする際に発生する問題と解決策
>>: MySQLテーブル名の大文字と小文字を区別しない設定方法の詳細な説明
誰についてシステムにログインしているユーザーを表示します。 who コマンドを実行すると、現在システ...
Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...
1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
MySQL(5.6以下)はjsonを解析します #json 解析関数 DELIMITER $$ `j...
序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...
導入EXISTS は、サブクエリが少なくとも 1 行のデータを返すかどうかを確認するために使用されま...
以前、プロジェクトを開発しました。バックエンドのインターフェースを書くために Flask フレームワ...
この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...
目次序文1. 画像の最適化2. .mapファイルの生成を無効にする3. ルーティングの遅延読み込み4...
本日は、Web 開発で使われる基本的な概念と技術を初心者向けに紹介します。A から Z まで合計 2...
1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...
Spring Boot プロジェクトでは、Docker コンテナ、jar、war の階層化パッケージ...
オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...
この記事ではvueを使用し、マウスクリックイベントといくつかの小さなページの最適化を追加します。 基...