2024年前端最全在前端对登录密码进行加密，md5+盐值_前端登录密码加密(1)，关于前端开发的面试经验总结

总结

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

其实在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的值是否相等
})



### 最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)

![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)