Vue3使用MD5加密实战案例(清晰明了)

更新时间：2023年05月17日 17:05:28 作者：sout-lanys

MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性,这篇文章主要给大家介绍了关于Vue3使用MD5加密的相关资料,需要的朋友可以参考下

概述

最近在想做个cloud项目,gitee上找了个模板项目，前端使用到vue3 + typeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等技术，最近使用到vue3 MD5加密，顺便学习一下，在此总结一下，若有不足之处，望大佬们可以指出。

vue3 安装 ts-md5

注意： ts-md5 不是 js-md5

npm install --save ts-md5

局部

定义：

import { Md5 } from 'ts-md5';

局部使用：

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

案例

// 表单提交
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 安装 js-md5

npm install --save js-md5

局部

定义：

import md5 from "js-md5";

出现问题

意思是：

已声明“md5”，但从未读取其值。ts(6133)

无法找到模块“js-md5”的声明文件。“…/src/md5.js”隐式拥有 “any” 类型。

尝试使用 npm i --save-dev @types/js-md5 (如果存在)，或者添加一个包含 declare module ‘js-md5’; 的新声明(.d.ts)文件ts。

提示已经提供了两种方案。

方案一（没使用过）

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

方案二

在目录src中创建 shims.d.ts 文件，文件名可以自己定义，由于我这个已经有 shims.d.ts 文件，直接在文件里面加声明了。.d.ts 文件是可以放到src目录下，或者根目录都可以。

案例

配置完之后，就可以使用了。

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

实现效果

总结

到此这篇关于Vue3使用MD5加密的文章就介绍到这了,更多相关Vue3使用MD5加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

setup+ref+reactive实现vue3响应式功能
这篇文章介绍了通过setup+ref+reactive实现vue3响应式功能，文中通过示例代码介绍的非常详细。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-11-11
基于Vue3+IntersectionObserver实现高性能图片懒加载
本文详解 Vue3 中如何使用 IntersectionObserver API 实现图片懒加载,核心优势在于进入视口才加载图片,可显著提升首屏加载速度、节省带宽资源、避免页面卡顿,适合多图列表场景,需要的朋友可以参考下
2026-05-05
解决ant design vue中树形控件defaultExpandAll设置无效的问题
这篇文章主要介绍了解决ant design vue中树形控件defaultExpandAll设置无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue中v-for循环数组,在方法中splice删除数组元素踩坑记录
这篇文章主要介绍了vue中v-for循环数组,在方法中splice删除数组元素踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
vue实现搜索小功能
这篇文章主要为大家详细介绍了vue实现搜索小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
Vue3新特性之在Composition API中使用CSS Modules
这篇文章主要介绍了Vue3新特性之在Composition API中使用CSS Modules,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
Vue3 + MQTT实现前端与硬件设备直接通讯(附完整代码解析)
MQTT作为一种低开销、低带宽占用的即时通讯协议,使其在物联网、小型设备、移动应用等方面有着广泛的应用,这篇文章主要介绍了Vue3 + MQTT实现前端与硬件设备直接通讯的相关资料,需要的朋友可以参考下
2025-10-10
vue3封装request请求的完整案例
本文提供了如何将Vue3的静态页面集成到基于Vue2的若依项目中,并确保能够访问Vue2的接口,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2024-09-09
Vue3自定义drag指令详解
这篇文章主要为大家详细介绍了Vue3自定义drag指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
2023-12-12
关于Vue背景图打包之后访问路径错误问题的解决
本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11