Vue で AES.js を使用する詳細な手順

Vue で AES.js を使用する詳細な手順

AES暗号化の使用

データ転送の暗号化と復号化処理 --- AES.js

最初のステップ:

vue に crypto-js 依存関係をインストールする

npm をインストール crypto-js --save-dev

ステップ2:

静的ディレクトリに新しい AES.js ファイルを作成します。例:

ステップ3:

AES.jsに次のコードを入力してください

「crypto-js」からCryptoJSをインポートします。
// npm をインストール crypto-js --save-dev
//指定された数の32ビットキーをランダムに生成する
エクスポートデフォルト{
  生成キー(数値) {
    ライブラリを =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    キーを "" にします。
    (var i = 0; i < num; i++) の場合 {
      randomPoz = Math.floor(Math.random() * library.length); とします。
      キー += library.substring(randomPoz, randomPoz + 1);
    }
    リターンキー;
  },
  //暗号化(単語、keyStr) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g"; //ksyが存在するかどうかを判断します。存在しない場合は、定義されたキーを使用します
    var key = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(単語);
    var 暗号化 = CryptoJS.AES.encrypt(srcs, キー, {
      モード: CryptoJS.mode.ECB、
      パディング: CryptoJS.pad.Pkcs7
    });
    暗号化された.toString() を返します。
  },
  //復号化decrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g";
    var key = CryptoJS.enc.Utf8.parse(keyStr);
    var decrypt = CryptoJS.AES.decrypt(単語、キー、{
      モード: CryptoJS.mode.ECB、
      パディング: CryptoJS.pad.Pkcs7
    });
    CryptoJS.enc.Utf8.stringify(decrypt).toString() を返します。
  }
};

ステップ4:

暗号化が必要な場所を紹介する

「@/common/AES.js」からAESをインポートします。

ステップ5:

電話

// オブジェクト/配列の場合は、まず JSON.stringify で文字列に変換する必要があります // 暗号化メソッドを呼び出します var encrypts = AES.encrypt(JSON.stringify(cars),keys);
//復号化メソッドを呼び出します var dess = JSON.parse(AES.decrypt(encrypts,keys));
console.log(暗号化)
console.log(暗号化の長さ)
コンソールログ(dess) 

これで、Vue で AES.js を使用する詳細な手順に関するこの記事は終了です。Vue で AES.js を使用する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Python3とVueをベースにAESデータ暗号化を実装する方法
  • AES を使用して Vue プロジェクトでパスワードの暗号化と復号化を実装する (ECB および CBC モード)

<<:  写真のプレビューとアップロード機能を実現するhtml+css+js

>>:  Docker nginxは1つのホストを実装して複数のサイトを展開します

推薦する

MySQL は information_schema オブジェクトの付与をバイパスし、ERROR 1044 (4200) エラーを報告します

この質問は、MySQL の権限に関する WeChat グループのネットユーザー間の議論です。次のよう...

Linux で特定のユーザーまたはユーザー グループに対して SSH を有効または無効にする方法

会社の基準により、特定のユーザーだけに Linux システムへのアクセスを許可することができます。あ...

初心者向けのMySQLデータベースとテーブルDDLの作成と操作の学習

目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...

HTMLは正規表現を使用してテーブルの例をテストします

以下は、HTML で正規表現を使用してテーブルをチェックするサンプル コードです。具体的なコードの内...

Linux で仮想コンソール セッションをロックする方法

共有システムで作業しているときは、他のユーザーが自分のコンソールを覗き込んで、自分が何をしているか見...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード

折りたたみ表示の複数行テキストコンポーネント複数行のテキスト コンポーネントを折りたたんで表示し、展...

MySQLコマンドプロンプトで入力エラーが発生したときに前のコマンドを修正する方法

目次現在の問題解決プロセス具体的な手順解決した事件現在の問題MySQL コマンド プロンプトに複数行...

Vue3.0はチェックボックスコンポーネントのカプセル化を実装します

この記事では、チェックボックスコンポーネントのカプセル化を実装するためのvue3.0の具体的なコード...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

CSS3のtext-fill-colorプロパティの詳細な説明

text-fill-color とは何を意味しますか?文字通りの意味から言えば、「テキストの塗りつぶ...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

Nginx の一般的な設定とテクニックの概要

序文この記事では、Nginx の一般的な、実用的で興味深い構成をいくつか紹介します。この記事を読んだ...

Mac に MySQL データベースをインストールし、環境変数を設定するためのグラフィック チュートリアル

目次MySQLをインストールする環境変数の設定MySQLをインストールするmysqlをダウンロードし...

MySQLデータベースが大きすぎる場合にバックアップと復元を行う方法

コマンド: mysqlhotcopyこのコマンドは、ファイルをコピーする前にテーブルをロックし、不完...