前端（Vue）Js实现MD5加密

前端（Vue）Js实现MD5加密

写在前面

为防范风险，要保证传输给服务端的密码数据不是明文，所以决定通过前端对密码加密实现非明文密码传输。写这篇文章的目的不是解决疑难杂症，而是让大家可以随时找到可以解决问题的办法。

首先，希望友友们先跟我一起了解一下整个前后端的流程

• 用户注册时将加密后的密码发送给客户端储存在数据库里面
• 登陆的时候再将加密后的密码和数据库中存储的加密的密码相匹配
• 实现密码无明文传输登录
  

MD5加密没有很复杂，简单的几步就可以完成：

1. 导入依赖，这里使用的是crypto

2. 找到login(登录方法)

3. 创建加密后的变量替换我们的password

一、页面导入依赖

安装依赖

终端npm安装crypto

npm install crypto --save

在需要用到的文件中使用import…from…引入

import crypto from 'crypto'

调用其中的createHash()方法返回一个MD5实例对象

二、MD5加密实现

主要实现代码：

login() {
   let md5 = crypto.createHash('md5')
   md5.update(password)
   const md5Password = md5.digest('hex')
   const data = {
    username,
    md5Password,
    code,
  }
}

md5Password就是加密后的结果了

简要解析createHash()、md5.update()方法

createHash(‘md5’) 通过MD5加密的方式加密，返回一个实例对象

md5.update(你要加密的内容) 将你需要加密的内容加密

md5.digest(‘hex’) 返回的值是二进制 （ps：还有个md5.hexdigest()返回十六进制哦）

人有悲欢离合，月有阴晴圆缺。函数讲完了就要到了该告别的时候了！

三、给大家来个手动复述(记得要看)

以上就是整个实现过程，你学会了吗？

• let md5 = crypto.createHash(‘md5’)
• md5.update(password)
• md5.digest(‘hex’)
• 记得收藏不迷路 嘿嘿bye

完结

最后实现过程很简单，但是要变成自己的脑子里的东西，就要多加练习。好记性不如烂笔头还是有一定道理的。好了，前端vue实现MD5加密的内容就分享完毕了，手动完结 撒花。

关于 Vue 语法有不懂的，可以参考 这里vue2文档,