大家好，我是大澈！
本文约3400+字，整篇阅读大约需要6分钟。
本文主要内容分三部分，第一部分是需求分析，第二部分是实现步骤，第三部分是问题详解。
如果您只需要解决问题，请阅读第一、二部分即可。
如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。
在前端，用户点击登录和注册时，在登录和注册接口中不允许看到请求中真正的用户密码。
在后端，用户点击登录和注册时，在数据库中不允许存取真正的用户密码。
在学习如何使用之前，我们要明白的是，在项目中如果进行密码加密，有哪几种情况。然后就是，实现密码加密的方式有哪些，哪一种是相较来说，较好用及安全性较高的。
密码加密实现情况：
已上这三种情况，在实际的开发中，使用较多的，当然是第一种情况，这种情况可以提供更高的安全性和密码保护。
前端将用户密码进行加密后再传输给后端，可以减少密码在网络传输过程中的风险，确保密码的机密性。
后端再对接收到的密码进行加密，将加密后的密码存储到数据库中。这样即使数据库遭到非法访问，密码也不会以明文形式暴露，增加了密码的安全性。
这一点说明到这里打住，不再赘述。
然后就是实现密码加密的常用方式：
对称加密算法使用相同密钥进行加密和解密，非对称加密算法使用公钥和私钥，哈希函数将数据转换为固定长度的哈希值，密码推导函数通过迭代和加盐增加密码破解难度。
上述加密方式，从上往下，安全性依次增高。
这一点在这里只做简要说明，有需要的朋友，请见第三部分对加密方式的详细总结。
搞清楚这些，然后下面，就是如何使用的问题了。
为提高大家的使用效率，这里大澈只提供较常用的情况(第一种)，以及较安全的密码加密方式(BCrypt)的使用。
其它加密方式的使用，与此大同小异。
模板代码：
<template><div><input type="text" v-model="username" placeholder="Username" /><input type="password" v-model="password" placeholder="Password" /><button @click="register">Register</button><button @click="login">Login</button></div></template引入依赖：
npm i bcryptjs
逻辑代码:
<script setup>// 使用 bcrypt.js 进行密码加密import bcrypt from 'bcryptjs'; const password = ref('')// 设置与后端相同的 cost 盐值const cost = 10; const register = async () => {// 前端加密密码const hashedPassword = await bcrypt.hash(password.value, cost); // 将用户名和加密后的密码发送到后端进行注册// ...},const login = async () => {// 前端加密密码const hashedPassword = await bcrypt.hash(password.value, cost); // 将用户名和加密后的密码发送到后端进行登录验证// ...}</script>这里做一下说明：
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;@RestControllerpublic class UserController {// 设置与前端相同的 cost 盐值private static final int COST = 10; @Autowiredprivate PasswordEncoder passwordEncoder;// 注册接口@PostMapping("/register")public ResponseEntity<?> registerUser(@RequestBody UserRequest userRequest) {String username = userRequest.getUsername();String password = userRequest.getPassword(); // 前端已经进行了密码加密// 后端对密码进行加密String encryptedPassword = passwordEncoder.encode(password);// 存储用户信息及加密后的密码、对应盐值到数据库// ...return ResponseEntity.ok("User registered successfully!");}// 登录接口@PostMapping("/login")public ResponseEntity<?> loginUser(@RequestBody UserRequest userRequest) {String username = userRequest.getUsername();String password = userRequest.getPassword(); // 前端已经进行了密码加密// 从数据库中根据用户名查询用户信息User user = userRepository.findByUsername(username);if (user == null) {return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");}// 后端验证密码boolean isMatched = passwordEncoder.matches(password, user.getPassword());// 认证成功，生成 JWT Token 等操作// ...if (isMatched) {return ResponseEntity.ok("Login successful!");} else {return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");}}}
AES：
RSA：
MD5：
SHA：
BCrypt：
PBKDF2：
SCrypt：
很枯燥的一段学术语言，大家随便看看即可，哈哈哈。
这里也是为什么使用MD5加密时，常常会进行加盐处理的原因了。
在密码学中，不可逆（irreversible）表示无法从哈希值还原出原始数据。
当数据经过哈希函数处理后，生成的哈希值是固定长度的一串字符。不可逆意味着无法通过逆向计算或解密操作来获取原始数据。即使输入数据的细微改变也会导致生成完全不同的哈希值。
这种不可逆性是哈希函数的重要特性之一，用于保证数据的完整性和验证数据的一致性。通过对原始数据进行哈希处理，并将哈希值与预期的哈希值进行比对，可以快速检查数据是否被篡改或损坏。如果哈希值相同，则可以确定数据完整性没有受到破坏；如果哈希值不同，则说明数据已被修改，或者数据传输过程中出现了错误。
需要注意的是，虽然哈希函数是不可逆的，但是存在哈希碰撞的概率，即不同的输入数据可能会产生相同的哈希值。然而，好的哈希函数应该具有极低的碰撞概率，以确保数据完整性和安全性。
Base64编码只是一种编码传输方式，不是加密算法。
它将二进制数据转换为可打印的ASCII字符，常用于在文本协议中传输或存储二进制数据，例如在电子邮件中传输附件、在网页中嵌入图像等。
我们常常会将Base64误解为它是一种加密方式，其实不然，Base64和我们常用的JWT一样，都是一种数据编码传输方式，只不过Base64常用于在文本环境中传输图片、文件。
以下是常用应用场景的详细说明：
虽然Base64有以上作用，但它会导致数据膨胀，增加数据的大小。
在传输大量二进制数据或对传输效率有较高要求的情况下，如传输大视频、大图片、大文件等，不易使用。
如果需要在文本环境中传输大文件，可以考虑使用其他更合适的技术，例如使用压缩算法对文件进行压缩，或者使用分布式文件系统或云存储服务，如Minio、OSS，来处理大文件的传输和存储。
本文链接：http://www.28at.com/showinfo-26-56603-0.htmlVue3问题：如何实现密码加密登录？前后端！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 反向 Debug 了解一下？揭秘 Java DEBUG 的基本原理
下一篇： 通过API网关缓解OWASP十大安全威胁
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
