vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法

目录
  • 方法一:md5加密
  • 方法二:crypto-js 加密解密
  • 方法三:国密sm3
  • 方法四:国密sm4
  • 写在后面:

项目中涉及到一些加密解密的需求,了解并尝试了几种加密解密方法,以下:

方法一:md5加密

注意:md5的特性就是只能加密,所以用md5加密的时候,一定要记住你填写的内容,因为它是无法解密的。

npm安装:

npm install --save js-md5

全局引用

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

使用

this.$md5('This is encrypted content') //6f43dd5db792acb25d6fe32f3dddac70

在vue页面单独使用:

首先安装依赖,然后引入

import md5 from 'js-md5';

使用

md5('This is encrypted content') //6f43dd5db792acb25d6fe32f3dddac70

方法二:crypto-js 加密解密

注意:crypto-js加密后可自行选择是否转为base64,也需要后端配合加解密方法

安装

npm install crypto-js

uitls新建文件夹screate.js

const CryptoJS = require('crypto-js');  //引用AES源码js
const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");  //十六位十六进制数作为密钥
// const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');   //十六位十六进制数作为密钥偏移量 可用可不用

//加密方法
export function Encrypt(word){
  // 法一:加密后转化为base64
  // let srcs = CryptoJS.enc.Utf8.parse(word);
  // let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  // return encrypted.ciphertext.toString();

  // 法二:不转
  let srcs = CryptoJS.enc.Utf8.parse(word);
  let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  return encrypted.toString();
}

//解密方法
export function Decrypt(word){
  // 法一:对应解密
  // let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  // let decrypt = CryptoJS.AES.decrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
  // let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  // return decryptedStr.toString(); 

  // 法二:
  var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
  return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

使用:参数是对象的话,加密需要 JSON.stringify(),解密需要JSON.parse()

getData(){
  letparams = {
    "appId": '0000',
    "bizData": {
      "appName": '测试名称',
      "authMode": "0x1113"
    },
    "bizType": 1000
  }
  var aa = Encrypt(JSON.stringify(params))
  console.log(aa, '加密')
  searchHandle('/xxx/xxx/xxx', aa).then(res=>{
    console.log('接口返回',res.data)
    var dd = JSON.parse(Decrypt(aa))
    console.log(dd, '解密')
    if(res.data.code === 0){}
  })
}

方法三:国密sm3

安装

npm install --save sm-crypto

方法四:国密sm4

安装

npm install gm-crypt

写在后面:

aes前后端加密解密参考:

  • https://www.cnblogs.com/heyf/p/11205570.html (不转成base64)

前端参考:

  • https://blog.csdn.net/xgangzai/article/details/113577454
  • https://my.oschina.net/lemonfive/blog/2962495
  • https://blog.csdn.net/u014678583/article/details/105157695/

到此这篇关于vue项目使用md5加密、crypto-js加密、国密sm3及国密sm4的方法的文章就介绍到这了,更多相关vue使用md5、crypto-js加密、国密sm3、sm4内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VueJs里利用CryptoJs实现加密及解密的方法示例

    第一步 安装 安装crypto-js 第二步 创建 在js文件目录下创建一个js文件secret /** * 对页面上输入的密码进行加密传输给后台进行验证,对返回的数据进行解密,在页面展示 */ let CryptoJS = require('crypto-js'); // 引入AES源码js export default { /* * 对密码进行加密,传输给后台进行验证 * @param {String} word 需要加密的密码 * @param {String} keyStr 对密码加密的

  • Vue中使用crypto-js AES对称加密算法实现加密解密

    目录 下载crypto-js 加密解密数据 AES算法的ECB模式加密-设置秘钥 AES算法的CBC模式加密-设置秘钥和偏移量 参考: 在数字加密算法中,通过可划分为对称加密和非对称加密 对称加密:如AES,DES,3DES 含义:加密和解密使用的是同一把钥匙.密钥不能在网络中传输,避免被拦截.如果要传输,必须要对密钥进行非对称加密再加密一次. 优点:算法简单,加密解密容易,效率高,执行快. 缺点:相对来说不算特别安全,只有一把钥匙,密文如果被拦截,且密钥也被劫持,那么,信息很容易被破译. 非对

  • 前端加密cryptojs与JSEncrypt使实例详解

    目录 单向散列函数 MD5 简单介绍 使用场景 使用 crypto-js 进行 MD5 加密 CryptoJS.MD5() algo 对称加密算法 AES 使用 crypto-js 进行 AES 加密 解密 非对称加密RSA 使用 JSEncrypt 进行 RSA 加密 使用 JSEncrypt 进行 RSA 解密 OpenSSL 安装 生成私钥 生成公钥 单向散列函数 在网站项目中,有时我们需要对传给后端的数据,比如 token 等进行加密处理.本文是对几种常见的前端加密方法,以及如何使用开源

  • vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)

    vue项目中使用AES实现密码加密解密 区别 ECB:是一种基础的加密方式,密文被分割成分组长度相等的块(不足补齐),然后单独一个个加密,一个个输出组成密文. CBC:是一种循环模式,前一个分组的密文和当前分组的明文异或或操作后再加密,这样做的目的是增强破解难度.(不容易主动攻击,安全性好于ECB,是SSL.IPSec的标准) 代码实现 先安装 crypto-js npm install crypto-js --save-dev ECB模式: import CryptoJS from "cryp

  • 前端使用crypto.js进行加密的函数代码

    crypto-js 是一个纯 javascript 写的加密算法类库 ,可以非常方便地在 javascript 进行 MD5.SHA1.SHA2.SHA3.RIPEMD-160 哈希散列,进行 AES.DES.Rabbit.RC4.Triple DES 加解密. 可以在这个GitHub的https://github.com/brix/crypto-js上下载该js,它可以单独引入所需要加密方式的js:也可以引入一个crypto-js.js 这个文件,它相当于引入了所有的加密方式,我使用的就是后者

  • 在vue项目如何使用base64加密

    目录 vue项目使用base64加密 方法一 方法二 vue项目对路由参数进行base64加密 加密 解密 vue项目使用base64加密 1.vue-cli 脚手架搭建前端项目中,使用base64加密传输数据 方法一 1.安装依赖 npm install --save js-base64 2.在main.js中引入 import Base64 from 'js-base64' Vue.use(Base64) 3.使用 Base64.encode(this.pwd);//加密 Base64.de

  • 详解vue项目构建与实战

    前言 由于vue相对来说比较平缓的学习过程和新颖的技术思路,使其受到了广大前后端开发者的青睐,同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户.本文主要讲解vue项目的构建与实战,因此不会太多涉及其API和语法部分,旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法. vue项目分类 首先,在构建一个vue项目之前我们需要了解vue项目的分类,这里我主要将其分为两类:(1)直接引入vue.js文件 (2)使用vue单文件组件 按以上两类来看,直接引入vue.js文件就像页

  • 关于vue项目proxyTable配置和部署服务器的问题

    目录 proxyTable配置和部署服务器 1.在config中的index 2.在调取接口的方法中 proxyTable代理参数含义 proxyTable配置和部署服务器 在本地创建node.js服务器,前端访问本地接口需要设置跨域 1.在config中的index 找到proxyTable,完成以下设置 proxyTable: { '/api': { target: 'http://localhost:8808/', //目标接口域名 changeOrigin: true, //是否跨域 p

  • 一文教会你如何运行vue项目

    目录 一.运行vue项目 1.下载node.js 2.安装 webpack 3.安装vue-cli脚手架 4.使用vue-cli创建项目 5.运行项目 二.运行别人的项目 1.删除package-lock.json文件 2.切换项目目录 3.清除npm缓存 总结 一.运行vue项目 1.下载node.js 安装完成后分别在cmd中执行node -v查看是否安装成功,出现版本号就安装成功了 2.安装 webpack npm install webpack -g 安装完成后分别在cmd中执行npm

  • 如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • vue项目适配屏幕分辨率与屏幕的缩放适配详细教程

    目录 解决方案 全局导入App.vue 刷新页面 笔记本或者显示器 默认设置125%或者150%缩放,导致布局错乱的解决方法 现在很多14寸的笔记本,出厂默认就是150%的显示.导致很多时候我们的项目,自己开发的时候都是按照100%比例来开发的,上线了就会发现这个问题 解决方案 vue项目utils下新建devicePixelRatio.js文件 class DevicePixelRatio { constructor() { // this.flag = false; } // 获取系统类型

  • 在vue项目中使用md5加密的方法

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world')  // 5eb63bbbe01eeed093cb22bb8f5acdc3 2.或者在main.js文件中将md5转换成vue原型: import md5 from 'js-md5'; Vue.prototype.$md5 = md5; 使用: this.$md5('hello world') // 5

  • 在Vue项目中使用jsencrypt.js对数据进行加密传输的方法

    项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用

随机推荐