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,以此来解析

相关推荐
How_doyou_do25 分钟前
样式冲突修复组件
前端·javascript·html
IT_陈寒29 分钟前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe29 分钟前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖35 分钟前
【npm】npm命令大全
前端·npm·node.js
我是天龙_绍36 分钟前
uniapp一个关于自定义导航栏高度计算的问题
前端
彭一36 分钟前
uniapp评论弹窗
前端
**之火40 分钟前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
我有一棵树1 小时前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
石小石Orz1 小时前
思考许久,我还是提交了离职申请
前端