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

相关推荐
杨进军9 分钟前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW23 分钟前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字30 分钟前
Kotlin lazy 委托的底层实现原理
前端
gnip1 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956391 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员1 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘1 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出1 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解1 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端