快捷導(dǎo)航

Vue3使用MD5加密實戰(zhàn)案例(清晰明了)

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

MD5是一種信息摘要算法(對稱加密),一種被廣泛使用的密碼散列函數(shù),可以產(chǎn)生出一個128位(16字節(jié))的散列值,用來確保信息傳輸完整一致性,這篇文章主要給大家介紹了關(guān)于Vue3使用MD5加密的相關(guān)資料,需要的朋友可以參考下

概述

最近在想做個cloud項目,gitee上找了個模板項目，前端使用到vue3 + typeScript、Element Plus、Vue Router、Pinia、Axios、i18n、Vite等技術(shù)，最近使用到vue3 MD5加密，順便學(xué)習(xí)一下，在此總結(jié)一下，若有不足之處，望大佬們可以指出。

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";

出現(xiàn)問題

意思是：

已聲明“md5”，但從未讀取其值。ts(6133)

無法找到模塊“js-md5”的聲明文件。“…/src/md5.js”隱式擁有 “any” 類型。

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

提示已經(jīng)提供了兩種方案。

方案一（沒使用過）

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

方案二

在目錄src中創(chuàng)建 shims.d.ts 文件，文件名可以自己定義，由于我這個已經(jīng)有 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);
	})
}