vue+springboot前后端分离 注册 SM4 前端加密 后端解密

注册表单密码加密提交到后端解密

一、前端部分

1.vue+elementui表单

<template>
    <el-form
      :model="registerForm"
      :rules="rules"
      ref="registerForm"
      label-position="left"
      label-width="0px"
      class="demo-ruleForm login-page"
    >      
      <el-form-item prop="username">
        <el-input
          type="text"
          v-model="registerForm.username"
          auto-complete="off"
          placeholder="Username"
        ></el-input>
      </el-form-item >
      <el-form-item prop="password"
      >
        <el-input
        :type="registerForm.show.old?'text':'password'"
          v-model="registerForm.password"
          auto-complete="off"
          placeholder="Password" 
          class="pwd"         
        >
        <span slot="suffix" class="show" style="    
    color: #f36c01;
    cursor: pointer;
    background-color: #ffffff;
    margin-right: 10px;" 
     @click="registerForm.show.old=!registerForm.show.old"
     >show</span>
        </el-input>
      </el-form-item>
      <el-form-item style="width: 100%" >
        <el-button class="btn" type="primary" style="width: 100%;border-radius: 30px;
    background: #f47920;
    border: none;padding: .5rem 1rem;
    font-size: 1.25rem;" 
    @click="RegisterSubmit"
          >注册</el-button
        >
      </el-form-item>
 </template>
 <script>
 import API from "@/api/axios";
 export default {
 name: "Register",
 data(){
 registerForm: {
        username: "",
        password: "",
        show: {
          old: false,
        },
      },
  rules: {
  //暂不做校验
  }
 }
 }
 <script>
 

2.引入Sm4加密工具（下方链接）

import { SM4Util } from "../utils/sm4";

3.提交表单

methods: {
    RegisterSubmit() {
      console.log("RegisterSubmit");
      // 表单校验提交
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          let _this = this;
          // 引入SM4Util
          let sm4 = new SM4Util();
          //params  提交的数据接收类型和名字要对应
          const params = new URLSearchParams(
            {
              "username":sm4.encryptData_ECB(this.registerForm.username),
              "password":sm4.encryptData_ECB(this.registerForm.password)
            });
          console.log("password加密前");
          console.log(this.registerForm.password);
          console.log("password加密后");
          console.log(sm4.encryptData_ECB(_this.registerForm.password));
          API.post("/oauth2/login/user-registration-form",params)
            .then(function (response) {
              console.log(response);
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
}

二、后端部分

1.引入sm4加解密工具类

2.后台接收

@RestController
public class LoginController {
	@Autowired
	private User user;
	@RequestMapping(path="/login/user-registration-form")
	public ResponseEntity<ResponseDetails> user(HttpServletRequest request,User user) {
		System.out.println("接收的username:  " + user.getUsername() + "接收的password: " + user.getPassword());
		System.out.println("解密后username: " + SM4Utils.decryptData_ECB(user.getUsername()));
		System.out.println("解密后password： " + SM4Utils.decryptData_ECB(user.getPassword()));
		return new ResponseEntity<ResponseDetails>(new ResponseDetails(HttpStatus.OK, "200", "Server Profiles", user ), HttpStatus.OK);
	}

结果显示

前端：