Vue实现SM4加密

前端先看有无.eslintrc.js文件,添加 rules 和 'globals'

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

安装SM4

TypeScript 复制代码
npm install sm4util

新建utils文件,引入使用

TypeScript 复制代码
//引入和使用
import {SM4Util} from "sm4util";
const sm4 = new SM4Util();
TypeScript 复制代码
<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>

后端也需要安装相应的SM4,以此来解析

相关推荐
布兰妮甜10 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia11 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
StrongerIrene20 分钟前
rs build 的process.env的值undefined解决方案
开发语言·javascript·ecmascript
前端小巷子29 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168837 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千1 小时前
重学React(二):添加交互
javascript·react.js·交互
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html