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つのホストを実装して複数のサイトを展開します

推薦する

Vue ElementUI で Excel ファイルを手動でサーバーにアップロードする方法の詳細な説明

目次概要プロパティ設定処理ロジック概要具体的な需要シナリオは次のとおりです。 Excel ファイルを...

CentOS 7 パスワードを忘れた場合の解決プロセス図

必要Windows システムでも Linux システムでも、さまざまな理由でパスワードを忘れてしまう...

CSS マルチレベルメニュー実装コード

これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...

Windows 10 システムで nginx ファイル サーバーを構成するためのグラフィック チュートリアル

Nginx の公式 Web サイトから Windows バージョンの Nginx をダウンロードしま...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

LinuxサーバーにVueプロジェクトをデプロイする

ケース1 vue-cliはvue3プロジェクトをビルドし、プロジェクトをLinuxサーバーにアップロ...

ウェブページ印刷細線表+ページ印刷究極の戦略

最近、クライアントのために印刷していたとき、ページのヘッダーを印刷するのではなく、表の内容だけを印刷...

VueのTodoListケースの詳しい説明

<テンプレート> <div id="ルート"> <...

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

Net Core実装プロセス分析のDoc​​kerインストールと展開

1. Dockerのインストールと設定 #CentOS をインストールし、Docker パッケージを...

MySQL データベースの Binlog 使用法の概要 (必読)

MySQL データベースにとって binlog バイナリ ログがどれほど重要であるかについては詳し...

JavaScript 高度なカスタム例外

目次1. コンセプト1.1 エラーと例外とは何ですか? 1.2 異常の分類2. 例外処理2.1try...

製品の拡大鏡効果を実現する JavaScript

この記事では、参考までに、製品拡大鏡を実装するためのJavaScriptの具体的なコードを紹介します...

Linux プロセスが占有するポート番号を表示する 6 つの方法

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。

目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...