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

相关推荐
默默地离开2 分钟前
从0到1掌握React+TypeScript开发:前端工程化实践指南
前端·react.js·typescript
Spider_Man4 分钟前
手指一拉,世界焕新:移动端下拉刷新全攻略
前端·javascript·react.js
恋猫de小郭5 分钟前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
1phoenix6 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
迷你二鹏7 分钟前
前端之Git
前端·git
二闹21 分钟前
大厂前端研发岗位设计的30道Webpack面试题及解析
前端·面试
拾光拾趣录27 分钟前
实现 `this` 对象的深拷贝:从“循环引用崩溃”到生产级解决方案
前端·javascript
无羡仙29 分钟前
90%的人都在用的下拉刷新,我把它拆了!
前端·node.js
一念杂记29 分钟前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
阳焰觅鱼29 分钟前
LRU缓存
前端