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

This article mainly introduces the relevant knowledge of Vue how to use MD5 to encrypt the front and back end, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this Vue article on how to use MD5 to encrypt the front and rear end. Let's take a look at it.

Front end

1. Create a new MD5.js tool class under public

The content of MD5:

Var KEY = "! @ # QWERT"; / * * Configurable variables. You may need to tweak these to be compatible with * the server-side, but the defaults work in most cases. * / var hexcase = 0; / * hex output format. 0-lowercase; 1-uppercase * / var b64pad = ""; / * base-64 pad character. "=" for strict RFC compliance * / var chrsz = 8; / * bits per input character. 8-ASCII; 16-Unicode * / / * These are the functions you'll usually want to call * They take string arguments and return either hex or base-64 encoded strings * / function hexMd5 (s) {return hex_md5 (s);} function hex_md5 (s) {return binl2hex (core_md5 (str2binl (s), s.length * chrsz));} function b64_md5 (s) {return binl2b64 (str2binl (s), s.length * chrsz)) } function str_md5 (s) {return binl2str (core_md5 (str2binl (s), s.length * chrsz));} function hex_hmac_md5 (key, data) {return binl2hex (core_hmac_md5 (key, data));} function b64_hmac_md5 (key, data) {return binl2b64 (core_hmac_md5 (key, data));} function str_hmac_md5 (key, data) {return binl2str (core_hmac_md5 (key, data)) } / * * Perform a simple self-test to see if the VM is working * / function md5_vm_test () {return hex_md5 ("abc") = = "900150983cd24fb0d6963f7d28e17f72";} / * Calculate the MD5 of an array of little-endian words, and a bit length * / function core_md5 (x, len) {/ * append padding * / x [len > > 5] | = 0x80 > > 9) 16) bkey = core_md5 (bkey, key.length * chrsz) Var ipad = Array (16), opad = Array (16); for (var I = 0; I

< 16; i++) { ipad[i] = bkey[i] ^ 0x36363636; opad[i] = bkey[i] ^ 0x5C5C5C5C; } var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz); return core_md5(opad.concat(hash), 512 + 128);}/* * Add integers, wrapping at 2^32. This uses 16-bit operations internally * to work around bugs in some JS interpreters. */function safe_add(x, y){ var lsw = (x & 0xFFFF) + (y & 0xFFFF); var msw = (x >

> 16) + (y > > 16) + (lsw > > 16); return (msw > (32-cnt));} / * * Convert a string to an array of little-endian words * If chrsz is ASCII, characters > 255have their hi-byte silently ignored. * / function str2binl (str) {var bin = Array (); var mask = (1 > 5] | = (str.charCodeAt (I / chrsz) & mask) 5] > > (I% 32) & mask); return str;} / * * Convert an array of little-endian words to a hex string. * / function binl2hex (binarray) {var hex_tab = hexcase? "0123456789ABCDEF": "0123456789abcdef"; var str = ""; for (var I = 0; I

< binarray.length * 4; i++) { str += hex_tab.charAt((binarray[i>

> 2] > > ((I% 4) * 8x4) & 0xF) + hex_tab.charAt ((binaray [I > 2] > > ((I% 4) * 8) & 0xF);} return str;} / * * Convert an array of little-endian words to a base-64 string * / function binl2b64 (binarray) {var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var str = ""; for (var I = 0; I)

< binarray.length * 4; i += 3) { var triplet = (((binarray[i >

> 2] > > 8 * (I% 4) & 0xFF) > 2] > 8 * ((I% 4)) & 0xFF) > 2] > > 8 * ((I% 4)) & 0xFF); for (var j = 0; j)

< 4; j++) { if(i * 8 + j * 6 >

Binarray.length * 32) str + = b64pad; else str + = tab.charAt ((triplet > > 6* (3murj)) & 0x3F);}} return str;}

2. In index.html, introduce MD5.js

3. Usage

/ * * the front end calls the MD5 encryption algorithm * KEY is the salt value, which makes the password more complex * / user.value.password = hexMd5 (user.value.password + KEY); backend

Spring comes with MD5 encryption, which can be directly referenced by the utility class DigestUtils.

User1.setPassword (DigestUtils.md5DigestAsHex (user.getUserCode (). GetBytes ()

The following is the source code of the tool class DigestUtils, and what you don't need can be ignored directly.

/ * Copyright 2002-2020 the original author or authors. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * https://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "ASIS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. * / package org.springframework.util;import java.io.IOException;import java.io.InputStream;import java.security.MessageDigest;import java.security.NoSuchAlgorithmException;/** * Miscellaneous methods for calculating digests. * *

Mainly for internal use within the framework; consider * Apache Commons Codec * for a more comprehensive suite of digest utilities. * * @ author Arjen Poutsma * @ author Juergen Hoeller * @ author Craig Andrews * @ since 3.0 * / public abstract class DigestUtils {private static final String MD5_ALGORITHM_NAME = "MD5" Private static final char [] HEX_CHARS = {'0,'1,'2,'3,'4,'5,'6,'7,'8,'9,'a cow, 'baked,' clocked, 'dumped,' eyed,'f'}; / * Calculate the MD5 digest of the given bytes. * @ param bytes the bytes to calculate the digest over * @ return the digest * / public static byte [] md5Digest (byte [] bytes) {return digest (MD5_ALGORITHM_NAME, bytes);} / * * Calculate the MD5 digest of the given stream. *

This method does not close the input stream. * @ param inputStream the InputStream to calculate the digest over * @ return the digest * @ since 4.2 * / public static byte [] md5Digest (InputStream inputStream) throws IOException {return digest (MD5_ALGORITHM_NAME, inputStream);} / * Return a hexadecimal string representation of the MD5 digest of the given bytes. * @ param bytes the bytes to calculate the digest over * @ return a hexadecimal digest string * / public static String md5DigestAsHex (byte [] bytes) {return digestAsHexString (MD5_ALGORITHM_NAME, bytes);} / * Return a hexadecimal string representation of the MD5 digest of the given stream. *

This method does not close the input stream. * @ param inputStream the InputStream to calculate the digest over * @ return a hexadecimal digest string * @ since 4.2 * / public static String md5DigestAsHex (InputStream inputStream) throws IOException {return digestAsHexString (MD5_ALGORITHM_NAME, inputStream);} / * * Append a hexadecimal string representation of the MD5 digest of the given * bytes to the given {@ link StringBuilder}. * @ param bytes the bytes to calculate the digest over * @ param builder the string builder to append the digest to * @ return the given string builder * / public static StringBuilder appendMd5DigestAsHex (byte [] bytes, StringBuilder builder) {return appendDigestAsHex (MD5_ALGORITHM_NAME, bytes, builder) } / * * Append a hexadecimal string representation of the MD5 digest of the given * inputStream to the given {@ link StringBuilder}. *

This method does not close the input stream. * @ param inputStream the inputStream to calculate the digest over * @ param builder the string builder to append the digest to * @ return the given string builder * @ since 4.2 * / public static StringBuilder appendMd5DigestAsHex (InputStream inputStream, StringBuilder builder) throws IOException {return appendDigestAsHex (MD5_ALGORITHM_NAME, inputStream, builder);} / * * Create a new {@ link MessageDigest} with the given algorithm. *

Necessary because {@ code MessageDigest} is not thread-safe. * / private static MessageDigest getDigest (String algorithm) {try {return MessageDigest.getInstance (algorithm);} catch (NoSuchAlgorithmException ex) {throw new IllegalStateException ("Could not find MessageDigest with algorithm\"+ algorithm +"\ ", ex) }} private static byte [] digest (String algorithm, byte [] bytes) {return getDigest (algorithm) .digest (bytes);} private static byte [] digest (String algorithm, InputStream inputStream) throws IOException {MessageDigest messageDigest = getDigest (algorithm) If (inputStream instanceof UpdateMessageDigestInputStream) {((UpdateMessageDigestInputStream) inputStream) .updateMessageDigest (messageDigest); return messageDigest.digest ();} else {final byte [] buffer = new byte [StreamUtils.buff _ SIZE]; int bytesRead =-1 While ((bytesRead = inputStream.read (buffer))! =-1) {messageDigest.update (buffer, 0, bytesRead);} return messageDigest.digest () }} private static String digestAsHexString (String algorithm, byte [] bytes) {char [] hexDigest = digestAsHexChars (algorithm, bytes); return new String (hexDigest);} private static String digestAsHexString (String algorithm, InputStream inputStream) throws IOException {char [] hexDigest = digestAsHexChars (algorithm, inputStream); return new String (hexDigest) } private static StringBuilder appendDigestAsHex (String algorithm, byte [] bytes, StringBuilder builder) {char [] hexDigest = digestAsHexChars (algorithm, bytes); return builder.append (hexDigest);} private static StringBuilder appendDigestAsHex (String algorithm, InputStream inputStream, StringBuilder builder) throws IOException {char [] hexDigest = digestAsHexChars (algorithm, inputStream) Return builder.append (hexDigest);} private static char [] digestAsHexChars (String algorithm, byte [] bytes) {byte [] digest = digest (algorithm, bytes); return encodeHex (digest);} private static char [] digestAsHexChars (String algorithm, InputStream inputStream) throws IOException {byte [] digest = digest (algorithm, inputStream) Return encodeHex (digest);} private static char [] encodeHex (byte [] bytes) {char [] chars = new char [32]; for (int I = 0; I

< chars.length; i = i + 2) { byte b = bytes[i / 2]; chars[i] = HEX_CHARS[(b >

> > 0x4) & 0xf]; chars [I + 1] = HEX_ chars [b & 0xf];} return chars;}} this is the end of the article on "how Vue uses MD5 to encrypt the front and back end". Thank you for reading! I believe that everyone has a certain understanding of "how to use MD5 to encrypt the front and back end of Vue". If you want to learn more, you are welcome to follow the industry information channel.

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.