Detaillierte Schritte zur Verwendung von AES.js in Vue

Detaillierte Schritte zur Verwendung von AES.js in Vue

Verwendung der AES-Verschlüsselung

Verschlüsselungs- und Entschlüsselungsverarbeitung bei der Datenübertragung --- AES.js

Erster Schritt:

Installieren Sie die Crypto-JS-Abhängigkeit in Vue

npm installiere crypto-js --save-dev

Schritt 2:

Erstellen Sie eine neue AES.js-Datei im statischen Verzeichnis, zum Beispiel:

Schritt 3:

Füllen Sie den folgenden Code in AES.js aus

importiere CryptoJS von „crypto-js“;
// npm installiere crypto-js --save-dev
//Eine bestimmte Anzahl von 32-Bit-Schlüsseln nach dem Zufallsprinzip generieren
Standard exportieren {
  generatekey(num) {
    let Bibliothek =
      „ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789“;
    lass Schlüssel = "";
    für (var i = 0; i < num; i++) {
      sei randomPoz = Math.floor(Math.random() * Bibliothek.Länge);
      Schlüssel += Bibliothek.Teilzeichenfolge(randomPoz, randomPoz + 1);
    }
    Eingabetaste;
  },
  //verschlüsseln(Wort, Schlüsselwert) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g"; //Beurteilen, ob ksy existiert. Wenn nicht, den definierten Schlüssel verwenden
    var Schlüssel = CryptoJS.enc.Utf8.parse(keyStr);
    var srcs = CryptoJS.enc.Utf8.parse(Wort);
    var verschlüsselt = CryptoJS.AES.encrypt(srcs, Schlüssel, {
      Modus: CryptoJS.mode.ECB,
      Polsterung: CryptoJS.pad.Pkcs7
    });
    returniere encrypted.toString();
  },
  //Entschlüsselungdecrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g";
    var Schlüssel = CryptoJS.enc.Utf8.parse(keyStr);
    var decrypt = CryptoJS.AES.decrypt(Wort, Schlüssel, {
      Modus: CryptoJS.mode.ECB,
      Polsterung: CryptoJS.pad.Pkcs7
    });
    gibt CryptoJS.enc.Utf8.stringify(entschlüsseln).toString(); zurück.
  }
};

Schritt 4:

Einführung, wo Verschlüsselung erforderlich ist

importiere AES aus "@/common/AES.js";

Schritt 5:

Anruf

//Wenn es ein Objekt/Array ist, müssen Sie es zuerst mit JSON.stringify in einen String konvertieren. //Rufen Sie die Verschlüsselungsmethode auf. var encrypts = AES.encrypt(JSON.stringify(cars),keys);
//Rufen Sie die Entschlüsselungsmethode auf var dess = JSON.parse(AES.decrypt(encrypts,keys));
console.log(verschlüsselt)
console.log(verschlüsselt.Länge)
console.log(dess) 

Damit ist dieser Artikel über die detaillierten Schritte zur Verwendung von AES.js in Vue abgeschlossen. Weitere relevante Inhalte zur Verwendung von AES.js in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • So implementieren Sie die AES-Datenverschlüsselung basierend auf Python3 und Vue
  • Verwenden von AES zum Implementieren der Kennwortverschlüsselung und -entschlüsselung im Vue-Projekt (ECB- und CBC-Modi)

<<:  Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen

>>:  Docker nginx implementiert einen Host zum Bereitstellen mehrerer Sites

Artikel empfehlen

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Dieser Artikel beschreibt, wie man über Docker ei...

Detaillierte Erklärung des Befehlsmodus in der Javascript-Praxis

Inhaltsverzeichnis Definition Struktur Beispiele ...

Unterschied zwischen HTML ReadOnly und Enabled

Das Textfeld mit dem ReadOnly-Attribut wird auf de...

Erste Schritte mit benutzerdefinierten Anweisungen in Vue 3.0

Inhaltsverzeichnis 1. Benutzerdefinierte Anweisun...

So fügen Sie Nginx dynamisch Module hinzu

Vorne geschrieben Nachdem wir Nginx basierend auf...

Analyse des Implementierungsprozesses der Docker-Container-Orchestrierung

In tatsächlichen Entwicklungs- oder Produktionsum...

HTML übertrifft das Implementierungsprinzip und den Code des Textzeilenabfangs

Der HTML-Code zum Abfangen von mehrzeiligem Text l...

vue3.0 + echarts realisiert dreidimensionales Säulendiagramm

Vorwort: Vue3.0 implementiert dreidimensionales S...

js zur Realisierung der automatischen Sperrbildschirmfunktion

1. Anwendungsszenarien Es gibt eine solche Anford...