脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot+vue数据加解密

基于SpringBoot+vue实现前后端数据加解密

 更新时间：2023年08月29日 11:32:09   作者：fking86  
这篇文章主要给大家介绍了基于SpringBoot+vue实现前后端数据加解密,文中有详细的示例代码,具有一定的参考价值,感兴趣的小伙伴可以自己动手试一试

前端

1.前期准备

​ 需要安装node环境

​ 安装好之后然后执行

​ npm install crypto-js

2.前端代码

​ pages->utils->Secret.js

import CryptoJS from 'crypto-js'
// 默认的 KEY 与 iv 如果没有给
const KEY = CryptoJS.enc.Utf8.parse("63eeac68cf074c8c");
const IV = CryptoJS.enc.Utf8.parse('63eeac68cf074c8c');
/**
 * AES加密 ：字符串 key iv  返回base64
 */
export function Encrypt(word, keyStr, ivStr) {
  let key = KEY;
  let iv = IV;  
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv, 
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}
/**
 * AES 解密 ：字符串 key iv  返回base64
 *
 * @return {string}
 */
export function Decrypt(word, keyStr, ivStr) {
  let key  = KEY;
  let iv = IV;
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
  let base64 = CryptoJS.enc.Base64.parse(word);
  let src = CryptoJS.enc.Base64.stringify(base64);
  let decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}

pages->index->index.vue

<template>
  <div>
    <h1>Login Page</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" v-model="username">
      <br>
      <label for="password">Password:</label>
      <input type="password" id="password" v-model="password">
      <br>
      <button type="submit" @click.prevent="login">Login</button>
    </form>
  </div>
</template>
<script>
import { reactive } from 'vue';
import {Encrypt} from '../utils/Secret.js'
export default {
  data: function() {
	return {
	  username: '',
	  password: ''
	}
  },
  methods: {
	login: function() {
	  let userName = this.username;
	  let pword = this.password;
	  console.log("userName:"+userName+"password1:"+pword);
	  pword = Encrypt(pword);
	  console.log("password2:"+pword);
	  fetch('http://localhost:8100/api/demo/login', {
	    method: 'POST',
	    headers: {
	      'Content-Type': 'application/json'
	    },
	    body: JSON.stringify({
	      userName: userName,
	      passward: pword
	    })
	  })
	  .then(response => response.json())
	  .then(data => console.log(data))
	  .catch(error => console.error(error));
	}
  }
};
</script>

后端

1.前期准备

​ pom.xml引入

    <dependencies>
        <!--密码解密-->
        <dependency>
            <groupId>org.bouncycastle</groupId>
            <artifactId>bcprov-jdk15on</artifactId>
            <version>1.60</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <version>RELEASE</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>com.alibaba.fastjson2</groupId>
            <artifactId>fastjson2</artifactId>
            <version>2.0.23</version>
        </dependency>
    </dependencies>

2.代码

​ org.example.utils.SecretUtils

package org.example.utils;
import org.apache.tomcat.util.codec.binary.Base64;
import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
/**
 * @author coderJim
 * @date 2023-04-25 00:07
 */
public class SecretUtils {
    /***
     * key和iv值可以随机生成
     */
    private static String KEY = "63eeac68cf074c8c";
    private static String IV = "63eeac68cf074c8c";
    /***
     * 加密
     * @param  data 要加密的数据
     * @return encrypt
     */
    public static String encrypt(String data){
        return encrypt(data, KEY, IV);
    }
    /***
     * param data 需要解密的数据
     * 调用desEncrypt（）方法
     */
    public static String desEncrypt(String data){
        return desEncrypt(data, KEY, IV);
    }
    /**
     * 加密方法
     * @param data  要加密的数据
     * @param key 加密key
     * @param iv 加密iv
     * @return 加密的结果
     */
    private static String encrypt(String data, String key, String iv){
        try {
            //"算法/模式/补码方式"NoPadding PkcsPadding
            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
            int blockSize = cipher.getBlockSize();
            byte[] dataBytes = data.getBytes();
            int plaintextLength = dataBytes.length;
            if (plaintextLength % blockSize != 0) {
                plaintextLength = plaintextLength + (blockSize - (plaintextLength % blockSize));
            }
            byte[] plaintext = new byte[plaintextLength];
            System.arraycopy(dataBytes, 0, plaintext, 0, dataBytes.length);
            SecretKeySpec keyspec = new SecretKeySpec(key.getBytes(), "AES");
            IvParameterSpec ivspec = new IvParameterSpec(iv.getBytes());
            cipher.init(Cipher.ENCRYPT_MODE, keyspec, ivspec);
            byte[] encrypted = cipher.doFinal(plaintext);
//            return new Base64().encodeToString(encrypted);
            return Base64.encodeBase64String(encrypted);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
    /**
     * 解密方法
     * @param data 要解密的数据
     * @param key  解密key
     * @param iv 解密iv
     * @return 解密的结果
     */
    private static String desEncrypt(String data, String key, String iv){
        try {
            byte[] encrypted1 = new Base64().decode(data);
            Cipher cipher = Cipher.getInstance("AES/CBC/NoPadding");
            SecretKeySpec keySpec = new SecretKeySpec(key.getBytes(), "AES");
            IvParameterSpec ivSpec = new IvParameterSpec(iv.getBytes());
            cipher.init(Cipher.DECRYPT_MODE, keySpec, ivSpec);
            byte[] original = cipher.doFinal(encrypted1);
            return new String(original).trim();
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

​ org.example.DemoContoller

package org.example;
import com.alibaba.fastjson2.JSONObject;
import org.example.utils.SecretUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * @author coderJim
 * @date 2023-04-25 00:24
 */
@RestController
@RequestMapping("/api/demo")
public class DemoContoller {
    @PostMapping("login")
    public Boolean login(@RequestBody(required = true) JSONObject json){
        String passward =  json.getString("passward");
        passward = SecretUtils.desEncrypt(passward);
        System.out.println("passward:"+passward);
        return true;
    }
}

到此这篇关于基于SpringBoot+vue实现前后端数据加解密的文章就介绍到这了,更多相关SpringBoot+vue数据加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JAVA 枚举单例模式及源码分析的实例详解

    JAVA 枚举单例模式及源码分析的实例详解

    这篇文章主要介绍了 JAVA 枚举单例模式及源码分析的实例详解的相关资料,需要的朋友可以参考下
    2017-08-08
  • 实例讲解Java读取一般文本文件和word文档的方法

    实例讲解Java读取一般文本文件和word文档的方法

    读取一般文本文件很好办,调用Java自带的io包里的类即可,富文本的doc文件我们可以用Apache的poi项目中的WordExtractor,这里我们一起来以实例讲解Java读取一般文本文件和word文档的方法
    2016-06-06
  • 详解Springboot事务管理

    详解Springboot事务管理

    本篇文章主要介绍了详解Springboot事务管理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Java class文件格式之访问标志信息_动力节点Java学院整理

    Java class文件格式之访问标志信息_动力节点Java学院整理

    access_flags 描述的是当前类（或者接口）的访问修饰符， 如public， private等， 此外， 这里面还存在一个标志位， 标志当前的额这个class描述的是类， 还是接口
    2017-06-06
  • Java实现人脸识别登录、注册等功能(最新完整版)

    Java实现人脸识别登录、注册等功能(最新完整版)

    这段时间由于学校实行静态化管理，寝室门和校门都是用了人脸识别的装置，本系列项目从设计到实现源码全部开源免费学习使用，对Java实现人脸识别登录、注册功能感兴趣的朋友一起看看吧
    2022-05-05
  • Springboot集成jsp及部署服务器实现原理

    Springboot集成jsp及部署服务器实现原理

    这篇文章主要介绍了Springboot集成jsp及部署服务器实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • SpringBoot整合RocketMQ的方法详解

    SpringBoot整合RocketMQ的方法详解

    这篇文章主要为大家详细介绍了SpringBoot整合RocketMQ的方法，文中的示例代码讲解详细，对我们学习有一定帮助，感兴趣的小伙伴可以了解一下
    2022-08-08
  • Java中Process类的使用与注意事项说明

    Java中Process类的使用与注意事项说明

    这篇文章主要介绍了Java中Process类的使用与注意事项说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-12-12
  • Java 中的 print() 和 println()

    Java 中的 print() 和 println()

    这篇文章主要介绍了Java 中的 print() 和 println()，Java 中的 print()和println()方法用于在控制台上显示文本，下面来看看它们之间到底有什么区别吧,需要的朋友也可以参考一下
    2021-11-11
  • java图片缩放实现图片填充整个屏幕

    java图片缩放实现图片填充整个屏幕

    这篇文章主要介绍了java图片缩放实现图片填充整个屏幕，本文提供了两种解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论