Vue实现SM4加密

news/2024/12/21 20:30:49/

前端先看有无.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>

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


http://www.ppmy.cn/news/1434722.html

相关文章

ETL工具-nifi干货系列 第十六讲 nifi Process Group实战教程,一文轻松搞定

1、目前nifi系列已经更新了10多篇教程了&#xff0c;跟着教程走的同学应该已经对nifi有了初步的解&#xff0c;但是我相信同学们应该有一个疑问&#xff1a;nifi设计好的数据流列表在哪里&#xff1f;如何同时运行多个数据流&#xff1f;如启停单个数据流&#xff1f; 带着这些…

Android Compose页面跳转Demo

1.引入依赖 //jetpack compose导航 implementation("androidx.navigation:navigation-compose:2.5.3") 2.代码 import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundat…

Day43:LeedCode 1049. 最后一块石头的重量 II 494. 目标和 474.一和零

1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能结果…

微信小程序手机授权报错:pad block corrupted

微信小程序手机号授权登录&#xff0c;传参至后台解密&#xff0c;大概率都会成功&#xff0c;但是&#xff0c;偶尔会遇到解密失败&#xff0c;报错信息为&#xff1a; javax.crypto.BadPaddingException: pad block corrupted&#xff1b;在此记录一下解决方案。 更改前获取…

excel相同行不同列查询

EXCEL中e列和f列是每一行对应的&#xff0c;我想在d列中找和e列一样的元素&#xff0c;然后获取同一行中f列的值 IFERROR(VLOOKUP(D1, E:F, 2, FALSE), "")

python之singledispatch单分派问题

singledispathch是Pyhton的functools里的方法&#xff0c;在使用时&#xff0c;一般当做装饰器。 作用&#xff1a;类似c中的重载&#xff0c;一个函数提供多种实现&#xff0c;根据参数类型的不同&#xff0c;调用不同的实现。 使用方法&#xff1a; 1. 必须有一个基函数&a…

前端css中filter(滤镜)的使用

前端css中filter的使用 一、前言二、补充内容说明三、模糊&#xff08;一&#xff09;、模糊效果&#xff0c;源码1&#xff08;二&#xff09;、源码1运行效果1.视频演示2.截图演示 四、阴影&#xff08;一&#xff09;、阴影效果&#xff0c;源码2&#xff08;二&#xff09;…

【Java | 多线程】可重入锁的概念以及示例

什么是可重入锁&#xff08;Reentrant Lock&#xff09;&#xff1f; 可重入锁&#xff08;又名递归锁&#xff09;是一种特殊类型的锁&#xff0c;它允许同一个线程在获取锁后再次进入该锁保护的代码块或方法&#xff0c;而不需要重新获取锁。 说白了&#xff0c;可重入锁的…