在前端对登录密码进行加密，md5+盐值-Toy模板网

这篇具有很好参考价值的文章主要介绍了在前端对登录密码进行加密，md5+盐值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在前端对登录密码进行加密，md5+盐值

场景：前端制定规则账号密码，后端不进行参与，完全就是前端进行校验
缺点：对于现在网络发达的时代，大部分人随便攻击你的网站就可以看到你的账号密码这样就可以轻松进入你的网站、不安全。
优点：基本没有，除非就是临时搭建不需要后端

当然这是我开发时候的场景大家在和后端进行加密的时候也可以使用这套加密逻辑是一样的

了解MD5

其实在MD5之前还有MD4和MD2 他们都是算法经过一代一代的迭代

MD5的特点
1.长度固定：无论多长的字符串，加密后长度都是一样长。
2.方便使用：我们可以直接下载MD5的包可以直接使用md5("加密内容")
3.不可逆性：基于这个不可逆性大大的提高了安全性
亿点小知识：对于MD5不可逆的说法网上有很多讨论如果是暴力逆转的话就不好说了

盐值是什么？

第一次听到盐值、很懵盐？
翻译 salt：盐
其实SALT值属于随机值不规律的值
其实盐值就是给算法加点盐(salt)，salt相当于加密的密钥，增加攻击网站破解加密后值的难度

实战

1.安装MD5

npm install js-md5

2.引入MD5
全局引入

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
// 其他页面使用
this.$md5("加密内容")

局部映入

import md5 from 'js-md5';
md5("加密内容")

3.在login页面

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import md5 from 'js-md5';
let form = reactive({
  user: "",
  password: "",
})
const solt = 'yanzhi' // 盐值
const newUser=   // newUser 是前端写死加密过后的账号进行来比对的
  {    
    user: '1232f297a57a5a74', // admin
    passwor: '1232f297a57a5a74' // 123456
  },

// 登录按钮
const = subForm(()=>{
	这里就可以判断 md5(md5(from.user)+solt) 和 newUser.user的值是否相等
})