前端——自定义HOOK封装js-md5加密

最新推荐文章于 2024-08-20 09:45:59 发布

helloyangkl

最新推荐文章于 2024-08-20 09:45:59 发布

阅读量654

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/helloyangkl/article/details/127875627

版权

Vue 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue中利用Hook函数封装常用逻辑，以MD5加密为例，创建了一个名为`useMd5`的Hook。首先通过npm安装js-md5库，然后在hooks文件夹下创建useMd5.js，导入md5和ref，并定义一个返回加密数据的函数。在实际使用时，可以在组件中引入这个Hook，用于加密用户输入的密码，如注册和登录场景。

摘要由CSDN通过智能技术生成

本质上 HOOK 是一个函数 只是把原来 setup 中我们写的组合式API进行了封装（就是把原来需要重复的逻辑封装起来方便复用），类似于 vue2 的 mixins 方便的把多个组件需要重复使用的逻辑封装起来

1.下载md5插件 npm install js-md5 -D

2.新建一个hooks的文件夹用来容纳把原来的逻辑复制过来 但是不要忘了return数据

import md5 from 'js-md5'
import {ref} from "vue"
export default function(data){
    let mdData=ref(md5(data))//加密数据
    return mdData
}

3.在想使用的页面引用

// 1.引用
import useMd5 from "../../hook/useMd5.js"
// 2.在注册的时候 使用hook来加密密码
 				let data = {
          uname: ruleForm.username,
          pwd: useMd5(ruleForm.password).value,
        };  
// 3.在登录的时候 使用hook来加密密码    
 link(`/register?uname=${ruleForm.username}&pwd=${useMd5(ruleForm.password).value}`,"get")