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

推薦する

JavaScript を使用して文字列内の最も繰り返しの多い文字を取得する方法

目次トピック分析する使用目的解決:コードは次のように実装されます。分析:配列とポインタ解決:コードは...

MySQL Community Server 8.0.11 のインストールと設定方法のグラフィックチュートリアル

最近、MySQL を始めとしてデータベースの知識を勉強し始めました。以下では、皆さんの参考になるよう...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

Linux gzip コマンドのファイル圧縮実装原理とコード例

gzip は、Linux システムでファイルの圧縮と解凍によく使用されるコマンドです。このコマンドで...

React+Ant Design開発環境をセットアップするための実装手順

基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: n...

MySQL 8の新機能である降順インデックスの基礎となる実装の詳細な説明

降順インデックスとは何ですか?インデックスについてはよくご存知かもしれませんが、降順インデックスにつ...

クラウド サーバーを使用して CentOS システムに .NET 6.0 をインストールする

.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

nginx の http リクエスト処理の各段階の詳細な分析

nginx の HTTP モジュールを作成する場合、リクエスト開始時のアクセス許可の有無、コンテンツ...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

Ubuntu で XFS ファイルシステム用の LVM を作成する方法

序文lvm (論理ボリューム マネージャー) 論理ボリューム管理は、Linux システムのニーズを満...

Vue は Ctrip のカルーセル効果を模倣します (スライディング カルーセル、以下は高度に適応)

まずケースを見てみましょう。vue+swiper を使用して実装します。スライドの高さが異なる場合、...

nginx keepaliveの具体的な使い方

http1.1 プロトコルのデフォルトのリクエスト ヘッダーでは、図に示すように、デフォルトで ke...

Dockerコンテナデータをコピーしてバックアップする方法の詳細な説明

ここでは、Jenkins コンテナを例に 3 つの方法を紹介します。方法1コンテナをイメージにパッケ...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...