前端(Vue)sha512加密、后端(Java)sha512加密后加盐实现完整流程

搜索时发现sha512加密(加盐)的内容很少 所以过来添一块砖


写在前面

简单唠一会,别烦嗷!

遇见新的事物我们不妨先来认识一下它。它是什么,能做什么,如何实现,学习起来才能事半功倍。


一、理解一下SHA512加盐

是什么?sha512是密码加密的一种方式,加盐是为了多一层安全保障。密码加盐通俗点来讲就是在密码后面随机加上一个值(这个值随心所欲,可以是固定值、随机数、uuid……)。这个值就是盐(salt),加值的过程就叫加盐。能干什么?加密也好加盐也罢都是为了安全如何实现?org.apache.commons.codec.digest.DigestUtils这个类里集成了多种加密方法其中也包含了本文的主角——sha512,在自己的项目中封装成工具类简直不要太好用!

二、前端项目实现SHA512加密

实现功能前梳理一下自己的实现思路,个人觉得是极好的!!!

前端对明文密码加密的过程是比较简单的

实现步骤:

  1. 前端页面中引入js工具类
  2. 使用CryptoJS.SHA512() 方法进行加密

1.前端页面中引入js工具类

//npm安装环境
npm install crypto-js

Tips:这里既可以终端手动输入命令,也可以鼠标悬浮自动导入的哈

//在需要使用加密方法的页面中引入CryptoJS
import CryptoJS from "crypto-js"

2.调用CryptoJS.SHA512()方法进行加密

const Sha512Password = CryptoJS.SHA512(this.password)

这样传给服务端的密码就是sha512加密过的密文啦,具体如何使用还要结合自己的实际项目。

三、后端项目实现SHA512加密加盐

实现步骤:

  1. 创建工具类
  2. 项目中调用加密方法
  3. 加密数据入库,完毕。

1.创建加密工具类SHA512Utils.java

代码如下(示例):
项目中util包SHA512Utils.java文件下 Tips:代码中有注释可以参考辅读

package com.pay.util;

import org.apache.commons.codec.digest.DigestUtils;
import java.util.UUID;

public class SHA512Utils {
   
   
    
对于 Vue 实现 SHA256 和 SM3-4 加密方式,可以在 Vue 组件中使用 JavaScript 进行实现,具体方法如下: 1. SHA256 加密方式的实现: ```javascript import { SHA256 } from 'crypto-js'; export default { methods: { sha256(str) { return SHA256(str).toString(); } } } ``` 2. SM3-4 加密方式的实现: ```javascript import { SM3 } from 'jsrsasign'; export default { methods: { sm34(str) { const hash = new SM3().hexstr(str); return hash; } } } ``` 需要注意的是,以上代码使用了 crypto-js 库和 jsrsasign 库中的 SM3 类,需要在 Vue 项目中安装以下依赖: ```bash npm install crypto-js jsrsasign ``` 然后在 Vue 组件中引入依赖: ```javascript import { SHA256 } from 'crypto-js'; import { SM3 } from 'jsrsasign'; ``` 然后就可以在 Vue 组件中使用 sha256 和 sm34 方法进行加密了。 示例代码如下: ```vue <template> <div> <h2>SHA256加密</h2> <p>原文: {{ message }}</p> <p>密文: {{ sha256Message }}</p> <h2>SM3-4加密</h2> <p>原文: {{ message }}</p> <p>密文: {{ sm34Message }}</p> </div> </template> <script> import { SHA256 } from 'crypto-js'; import { SM3 } from 'jsrsasign'; export default { data() { return { message: 'hello, world!', sha256Message: '', sm34Message: '' } }, created() { this.sha256Message = this.sha256(this.message); this.sm34Message = this.sm34(this.message); }, methods: { sha256(str) { return SHA256(str).toString(); }, sm34(str) { const hash = new SM3().hexstr(str); return hash; } } } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值