Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

Vue はブラウザのパスワード記憶機能を無効にするサンプル コードを実装します

情報を探す

インターネットで見つかったいくつかの方法:

  • autocomplete="off" を使用します (多くの最新ブラウザではサポートされていません)
  • autocomplete="new-password" を使用します
  • 実際のアカウントとパスワードボックスの前に同じ名前の入力ボックスを追加します
  • 読み取り専用属性を使用し、フォーカスされたら削除する
  • 入力ボックスの type 属性をテキストに初期化し、フォーカスされたときにパスワードに変更します。
  • type="text" を使用して、テキスト ボックスの内容を手動でアスタリスク「*」またはドット「●」に置き換えます。

実装プロセス

使用されるフィールド

データ() {
 戻る {
   ユーザー名: ''、
    パスワード: ''、
  }
}

最近のブラウザは autocomplete="off" をサポートしなくなったため、パスワード ボックスの設定をあきらめて、autocomplete="new-password" を直接使用しました。Chrome (v88.0.4324.104)、Edge (v88.0.705.56)、Firefox (v67) で動作することをテストしましたが、Firefox (v85) ではパスワードを思い出すように求められます。

<el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="password" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="新しいパスワード"></el-input>

参照:

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/フォームの自動補完をオフにする

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility

Firefox の高バージョンプロンプトを解決する過程で、方法 3/4/5 を試しましたが、結果は満足のいくものではありませんでした。ただし、Firefox の最終パスワード ボックスの値がアスタリスク「*」または小さなドット「●」である限り、パスワードを記憶するように要求されないことがわかりました (正しいかどうかはわかりません。自分でテストできます)。そこで、入力ボックスを関連付けるために新しいフィールド pwdCover を追加し、password を使用して実際に値を渡します。

寺院

<el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input>

<el-input v-model="pwdCover" type="password" name="pwd" id="pwd" placeholder="password" autocomplete="new-password"@input="setPassword"></el-input>
スクリプト
データ() {
 戻る {
   ユーザー名: ''、
    パスワード: ''、
    pwdカバー: '',
  }
},
方法:
 ログイン() {
   this.pwdCover = this.pwdCover.replace(/\S/g, '●');
    // ログイン要求、失敗した場合は pwdCover を復元
    this.pwdCover = this.password;
  },
  パスワードを設定する(val) {
   this.password = val;
  }
}

自信を持ってプロジェクトの同僚に送ったのですが、失敗に終わりました。現場の環境は次の通りでした。

  • オペレーティング システム: Windows 7、Windows 10
  • ブラウザ: Chrome v74.0.3729.108

同じバージョンの Google Chrome をインストールした後、問題は発生しませんでした。私のオペレーティング システムは Windows 10 です。何が問題だったのかわかりません。最終的に、方法 6 を選択しました。

ファイナル

寺院

<el-form-item>
 <el-input v-model="ユーザー名" type="text" name="text" placeholder="アカウント" autocomplete="オフ"><i slot="プレフィックス" class="el-input_icon el-icon-user"></i></el-input>
</el-form-item>
<el-form-item>
 <el-input v-model="pwdCover" type="text" name="pwd" id="pwd" placeholder="パスワード" autocomplete="off" @input="setPassword"><i slot="prefix" class="el-icon-lock"></i></el-input>
</el-form-item>

スクリプト

パスワードを設定する(val) {
  let reg = /[0-9a-zA-Z]/g; // 文字と数字のみが許可されますlet nDot = /[^●]/g; // ドット以外の文字let index = -1; // 新しく入力された文字の位置let lastChar = void 0; // 新しく入力された文字let realArr = this.password.split(''); // 実際のパスワード配列let coverArr = val.split(''); // テキストボックスにパスワード配列が表示されますlet coverLen = val.length; // テキストボックスの文字列の長さlet realLen = this.password.length; // 実際のパスワードの長さ// 新しく入力された文字と位置を検索coverArr.forEach((el, idx) => {
    if(nDot.test(el)) {
      インデックス = idx;
      最後の文字 = el;
    }
  });
  // 入力文字が仕様​​を満たしているか確認します。満たしていない場合は文字を削除します if(lastChar && !reg.test(lastChar)) {
    カバーArr.splice(インデックス、1);
    this.pwdCover = coverArr.join('');
    戻る;
  }
  (実長<カバー長)の場合{
    // 新しい文字を追加します realArr.splice(index, 0, lastChar);
  } そうでない場合 (coverLen <= realLen && index !== -1) {
    // 文字を置換します(直接置換する文字を 1 つ以上選択します)
    realArr.splice(インデックス、realLen - (coverLen - 1)、lastChar);
  } それ以外 {
    // 文字を削除します。val がすべて ● なので、一致させる方法がありません。文字が末尾から削除されるのか、途中から削除されるのかわかりません。数文字削除した後のパスワードの取り扱いは困難です。そのため、カーソルの位置と val の長さで判断できます。let pos = document.getElementById('pwd').selectionEnd; // カーソルの位置を取得します。realArr.splice(pos, realLen - coverLen);
  }
  // pwdCoverを
  this.pwdCover = val.replace(/\S/g, '●');
  this.password = realArr.join('');
},

ブラウザのパスワード記憶を禁止する機能をVueで実装するためのサンプルコードに関するこの記事はこれで終わりです。ブラウザのパスワード記憶を禁止するVueに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • フロントエンドのvue+elementUIでパスワード記憶機能を実装する方法
  • Vue+要素+クッキーパスワード記憶機能の簡単な実装方法
  • Vue で Cookie と crypto-js を使用してパスワードを記憶し、暗号化する方法
  • Vue でパスワード機能を記憶するために sessionStorage を使用する
  • Vue プロジェクトは、クッキーにパスワードを記憶する機能を実装します (ソースコード付き)

<<:  MySQL の準同期レプリケーションについての簡単な説明

>>:  Linux 向けの強化されたスクリーンショットと共有ツール: ScreenCloud

推薦する

MySQL 8.0 の新機能 - 管理ポートの使用の概要

目次序文接続管理追加の接続管理ポート要約する序文皆さんの多くは、次のようなエラー メッセージに遭遇し...

Linux でパスワードを入力せずに sudo コマンドを実行する方法

sudo コマンドを使用すると、信頼できるユーザーは別のユーザー (デフォルトでは root ユーザ...

MySQL コマンドライン操作中のエンコードの問題の詳細な説明

1. MySQLデータベースのエンコーディングを確認する mysql -u ユーザー名 -p パスワ...

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

MySQL 一時テーブルの簡単な使用法

MySQL 一時テーブルは、一時的なデータを保存する必要がある場合に非常に便利です。一時テーブルは現...

Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)

1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...

nacos が mysql に接続できない場合の解決策

理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...

電子署名を実装するWeChatミニプログラム

この記事では、WeChatミニプログラムで電子署名を実装するための具体的なコードを参考までに紹介しま...

Vue マルチ選択リスト コンポーネントの詳細な説明

マルチ選択は、すべてのオプションを一覧表示し、ユーザーが Ctrl/Shift キーを使用して複数選...

サーバー上で Nginx を使用して Springboot プロジェクトをデプロイする方法の詳細なチュートリアル (jar パッケージ)

1. Javaプロジェクトをjarパッケージにパッケージ化するここではMavenツールを使用します...

MySQL SELECT実行順序の簡単な理解

SELECT ステートメントの完全な構文は次のとおりです。 (7)選択 (8) DISTINCT ...

SQLの最適化では間違いがよく起こります。それはMySQLのExplain Planの使い方を理解していないからです。

目次1. 準備2. 説明計画の概要3. フィールドの詳細な説明4. パーティションクエリにはパーティ...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...