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

225 阅读 0 评论 149 点赞

我是靠谱客的博主虚拟发夹，这篇文章主要介绍前端——自定义HOOK封装js-md5加密，现在分享给大家，希望可以做个参考。

本质上 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")