Vue实现SM4加密

原创已于 2024-04-28 17:09:20 修改 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-04-20 12:13:06 首次发布

本文介绍了如何在前端项目中配置ESLint规则，重点关注了生产环境下的控制台警告和debugger禁用。同时，展示了如何在Vue组件中使用SM4库进行数据加密，包括安装、引入和加密函数的使用。后端也需要安装SM4进行解密操作。

前端先看有无.eslintrc.js文件，添加 rules 和 ‘globals’

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
  "globals":{
    "base64js": true,
  }

安装SM4

npm install sm4util

新建utils文件，引入使用

//引入和使用
import {SM4Util} from "sm4util";
const sm4 = new SM4Util();

<template>
	<div>
		<input v-model="mobilePhone" placeholder="请输入手机号">
		<input v-model="password" placeholder="请输入密码">
	</div>
</template>
<script>
import {SM4Util} from '@/utils/sm4';
export default {
  name: "Register",
  data(){
    return{
      username: '',
      mobilePhone: '',
      password: '',
      rePassword: ''
    }
  },
  mounted() {
    const sm4 = new SM4Util();
    const test = sm4.encryptData_CBC('123456')
    console.log('123456的加密结果：' + test)
  },
  
methods:{
    register(){
        // sm4加密
        const sm4 = new SM4Util();
        this.$axios
            .post("/user/register", {
              mobilePhone: this.mobilePhone.trim(),
              password: sm4.encryptData_CBC(this.password.trim()),
            })
      }
    }
}
</script>