Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about how to use CryptoJs to achieve Md5 encryption and 3Des encryption and decryption in VueJs. Many people may not know much about it. In order to make you understand better, the editor summed up the following content for you. I hope you can get something according to this article.

Install Crypto

You can do both md5 and 3des in Crypto, so it's convenient for us to install this directly.

Find our program directory, hold down Shift and right mouse button, and choose to open the Powershell window here.

Then type npm install crypto-js-save-dev in the cmd window

After the installation is complete, you can see that the red box is marked with success.

Code demonstration

MD5 encryption

Let's still use the project we signed last time, first of all, we have to quote Crypto-js.

Getmd5, let's write another method of GetMd5. The incoming string directly generates the character return of MD5.

Next, define a two-way bound string, and generate the md5 string on the page displayed when you click on the signature.

The effect after running

3DES encryption and decryption

Core code

Encrypt

Encrypt3Des (str: string, aStrKey: string, ivstr: string): string {

Const KeyHex = CryptoJS.enc.Utf8.parse (aStrKey)

Const encrypted = CryptoJS.TripleDES.encrypt (str

KeyHex

{

Mode: CryptoJS.mode.CBC

Padding: CryptoJS.pad.Pkcs7

Iv: CryptoJS.enc.Utf8.parse (ivstr)

});

Let hexstr = encrypted.ciphertext.toString () .toUpperCase ()

Console.log (hexstr)

Return hexstr

}

Generally, the last red box of encryption and decryption on the Internet here we directly output return encrypted.tostring (), but because our own C# and Android 3Des encryption and decryption are the final output hexadecimal string, so we change to the red box output style here.

Decryption

Decrypt3Des (str: string, aStrKey: string, ivstr: string): string {

Const KeyHex = CryptoJS.enc.Utf8.parse (aStrKey)

/ / because the hexadecimal string we use in encryption needs to be converted

/ / the first step is to convert the hexadecimal string to WordArray format

Const WordArray = CryptoJS.enc.Hex.parse (str)

/ / the second step is to convert WordArray into a base64 string.

Const base64str = CryptoJS.enc.Base64.stringify (WordArray)

/ / the third step is to decrypt.

Const decrypted = CryptoJS.TripleDES.decrypt (base64str

KeyHex

{

Mode: CryptoJS.mode.CBC

Padding: CryptoJS.pad.Pkcs7

Iv: CryptoJS.enc.Utf8.parse (ivstr)

});

Return decrypted.toString (CryptoJS.enc.Utf8)

}

More important here is the red box, because the final output of our encryption is a hexadecimal string, so when we decrypt it, we first convert the hexadecimal string to WordArray format, then convert it to BASE64 string, and then decrypt it. Because I am also a front-end rookie, it is this problem that I studied all afternoon before I figured it out.

Finally, the yellow box below should note that the output characters should be converted to Utf8.

Remaining settin

We define two strings in test.ts, one is the encrypted string of des3encryptstr, the other is the decrypted string, and then we add two methods, one is the encrypted method btnencrypt, the other is the decrypted method btndecrypt, which calls the two core code we just wrote.

Then add a bi-directional binding display, an encryption button and a decryption button to the test.vue.html.

Page effect

Unencrypted effect

Click on the effect of encryption

Click on the effect of decryption

After reading the above, do you have any further understanding of how to use CryptoJs to achieve Md5 encryption and 3Des encryption and decryption in VueJs? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.