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

2023-07-11 478

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

密钥管理服务KMS，1000个密钥，100个凭据，1个月

简介： 在前端对登录密码进行加密，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的值是否相等
})