Vue3 uses MD5 encryption (clear and clear)

overview

Recently, I want to build a cloud project. I found a template project on gitee. The front end uses vue3 + typeScript, Element Plus, Vue Router, Pinia, Axios, i18n, Vite and other technologies. I recently used vue3 MD5 encryption. By the way, I will learn it . To sum up here, if there are deficiencies, I hope the big guys can point them out.

vue3 install ts-md5

Note: ts-md5 is not js-md5

npm install --save ts-md5

partial

definition:

import {
    
     Md5 } from 'ts-md5';

Topical use:

// 定义MD5对象
const md5:any = new Md5()
md5.appendAsciiStr('密码')
const password = md5.end()
console.log('加密密码:',password);

the case

// 表单提交
const submitHandle = () => {
    
    
	dataFormRef.value.validate((valid: boolean) => {
    
    
		if (!valid) {
    
    
			return false
		}
		// 定义MD5对象
		const md5:any = new Md5()
		md5.appendAsciiStr(dataForm.password)
		dataForm.password = md5.end()
		console.log('加密密码:',dataForm.password);
		useAccountScriptSubmitApi(dataForm).then(() => {
    
    
			ElMessage.success({
    
    
				message: '操作成功',
				duration: 500,
				onClose: () => {
    
    
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

vue3 install js-md5

npm install --save js-md5

partial

definition:

import md5 from "js-md5";

problem appear

insert image description here
Meaning:
"md5" was declared, but its value was never read. ts(6133)
Unable to find declaration file for module 'js-md5'. ".../src/md5.js" implicitly has type "any".
Try npm i --save-dev @types/js-md5 if it exists, or add a new declaration (.d.ts) file ts containing declare module 'js-md5' ;

Prompt has provided two options.

Option 1 (never used)

 npm i --save-dev @types/js-md5

Option II

Create a shims.d.ts file in the directory src. The file name can be defined by yourself . Since I already have a shims.d.ts file, I directly add a statement in the file. The .d.ts file can be placed in the src directory or the root directory.
insert image description here
insert image description here

the case

After configuration, you can use it.

// 表单提交
const submitHandle = () => {
    
    
	dataFormRef.value.validate((valid: boolean) => {
    
    
		if (!valid) {
    
    
			return false
		}
		dataForm.password = md5(dataForm.password)
		console.log('加密密码:',dataForm.password);
	})
}

achieve effect

insert image description here
It’s not easy to create, I hope you can give me a like and support, thank you

Guess you like

Origin blog.csdn.net/qq_44697754/article/details/129605910