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

This article mainly shows you "vuejs how to achieve password encryption", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "vuejs how to achieve password encryption" this article.

Vuejs password encryption methods: 1, through the introduction of npm "crypto-js" dependency; 2, create js files to introduce "crypto-js" and write encryption methods; 3, in the components that need to be encrypted using cryptoObj encryption method.

Crypto-js is used in vue for password encryption (only front-end encryption is recorded here)

1. Npm introduces crypto-js dependency.

2. Create a js file to introduce crypto-js and write the encryption method

3. Use cryptoObj encryption method in components that need to be encrypted

1. Npm introduces crypto-js dependency npm install crypto-js-Dnpm install crypto-js-D

If an error occurs, my error is as follows (probably due to the use of Taobao image):

Npm ERR! Code 1npm ERR! Path E:\ Users\ yidu_\ Documents\ pccm-screen\ node_modules\ node-sassnpm ERR! Command failednpm ERR! Command C:\ WINDOWS\ system32\ cmd.exe / d / s / c node-gyp rebuildnpm ERR! Gyp info it worked if it ends with oknpm ERR! Gyp info using node-gyp@3.8.0npm ERR! Gyp info using node@14.15.1 | win32 | x64npm ERR! Gyp ERR! Configure errornpm ERR! Gyp ERR! Stack Error: Command failed: d:\ ProgramData\ Anaconda3\ python.EXE-c import sys; print "% s.%s.%s"% sys.version_info [: 3]; npm ERR! Gyp ERR! Stack File "", line 1npm ERR! Gyp ERR! Stack import sys; print "% s.%s.%s"% sys.version_info [: 3]; npm ERR! Gyp ERR! Stack ^ npm ERR! Gyp ERR! Stack SyntaxError: invalid syntaxnpm ERR! Gyp ERR! Stacknpm ERR! Gyp ERR! Stack at ChildProcess.exithandler (child_process.js:308:12) npm ERR! Gyp ERR! Stack at ChildProcess.emit (events.js:315:20) npm ERR! Gyp ERR! Stack at maybeClose (internal/child_process.js:1048:16) npm ERR! Gyp ERR! Stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) npm ERR! Gyp ERR! System Windows_NT 10.0.19042npm ERR! Gyp ERR! Command "D:\\ Program Files\\ nodejs\\ node.exe" E:\\ Users\\ yidu_\\ Documents\\ pccm-screen\\ node_modules\\ node-gyp\\ bin\\ node-gyp.js "rebuild" npm ERR! Gyp ERR! Cwd E:\ Users\ yidu_\ Documents\ pccm-screen\ node_modules\ node-sassnpm ERR! Gyp ERR! Node-v v14.15.1npm ERR! Gyp ERR! Node-gyp-v v3.8.0npm ERR! Gyp ERR! Not oknpm ERR! A complete log of this run can be found in:npm ERR! D:\ Program Files\ nodejs\ node_cachel\ _ logs\ 2021-05-06T07_10_11_380Z-debug.log

So then I used the Taobao image to install.

Cnpm install crypto-js-Dcnpm install crypto-js-D

Installation succeeded:

√ Installed 1 packages √ Linked 0 latest versions √ Run 0 scripts √ All packages installed (1 packages installed from npm registry, used 283ms (network 278ms), speed 4.58kB/s, json 1 (1.27kB), tarball 0B) 2, create js file to introduce crypto-js and write encryption method

Create the js file cryp.js under the src-assets folder

Introduce crypto-js into the cryp.js file and write the encryption method:

Import CryptoJS from 'crypto-js'var cryptoObj = {/ * encryption * / encryptFunc: (message) = > {var key =' 12345678900 secret key var keyHex = CryptoJS.enc.Utf8.parse (key); var encrypted = CryptoJS.AES.encrypt (message, keyHex, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7}) Return encrypted.toString ();},} export default cryptoObj 3. Use the cryptoObj encryption method import cryptoJSObj from'@ / assets/cryp.js' export default {name: 'Login', data () {/ / Mobile phone number Verification var contactPhone = (rule, value) in the components that need to be encrypted Callback) = > {if (! value) {return callback (new Error ('mobile phone number cannot be empty')} else {const reg = / ^ 1 [3 | 4 | 5 | 8 | 8] [0-9]\ d {8} $/ if (reg.test (value)) {callback ()} else {return callback (new Error ('enter the correct mobile phone number'))} Return {loading:false, form: {account:', password:',}, formRules: {/ / add or edit verification rule account: [{required: true, message: 'account cannot be empty'}], password: [{required: true, message: 'please enter password' Trigger: 'blur'}, {min: 13, message:' password length should be greater than 12 digits', trigger: 'blur'}, {pattern: / ^ (? =. * [a-zA-Z]) (? =. * [1-9]) (? =. * [\ W]). {13,} $/, message:' must contain uppercase and lowercase letters, numbers, special characters Length more than 12 bits'}],},}}, created () {}, methods: {startLogin: () {let password=cryptoJSObj.encryptFunc (form.password) / / where password is the encrypted password, form.password is the entered password},}} above is all the contents of the article "how to encrypt vuejs password". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.