vue中使用Base64加密、解密以及des加密、解密

Base64加密、解密

第一步:

      npm  install js-base64 --save  下载依赖

第二步:

     直接引入即可

     import { Base64 } from 'js-base64';

第三步:

      Base64.encode(xxxx)

其中  .encode() 加密          .decode() 解密

中间不需要使用加密的key等其他字符

des加密、解密

第一步:

      npm  install crypto-js --save  下载依赖

第二步:

     引入 :import CryptoJS from "crypto-js";

第三步:

  封装一下:

function encryptDes(word, keyStr, ivStr) {

  keyStr = keyStr || 'xxxx'

  ivStr = ivStr || 'xxxx'

  let key = CryptoJS.enc.Utf8.parse(keyStr)

  let iv = CryptoJS.enc.Utf8.parse(ivStr)

  let srcs = CryptoJS.enc.Utf8.parse(word)

  let encrypted = CryptoJS.DES.encrypt(srcs, key, {

    iv,

    mode: CryptoJS.mode.CBC,

    padding: CryptoJS.pad.Pkcs7

  })

  return encrypted.toString()

}

// 解密

function decryptDes(word, keyStr, ivStr) {

  try {

    keyStr = keyStr || 'xxxxx'

    ivStr = ivStr || 'xxxx'

    var key = CryptoJS.enc.Utf8.parse(keyStr)

    let iv = CryptoJS.enc.Utf8.parse(ivStr)

    var decrypt = CryptoJS.DES.decrypt({ ciphertext: CryptoJS.enc.Base64.parse(word) }, key, {

      iv,

      mode: CryptoJS.mode.CBC,

      padding: CryptoJS.pad.Pkcs7

    })

    return decrypt.toString(CryptoJS.enc.Utf8)

  } catch (err) {

    return 'false'

  }

}

export { encryptDes, decryptDes };

其中 keyStr  ivStr  需要和后端伙伴统一一下的秘钥  

第四步:

    在组件中使用   decryptDes(xxxx) 即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21598.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenLayers入门,OpenLayers解析通过fetch请求的GeoJson格式数据,并叠加要素文字标注,以行政区划边界为例

专栏目录: OpenLayers入门教程汇总目录 前言 本章讲解如何使用OpenLayers通过fetch请求geojson数据,然后通过OpenLayers解析为Feature要素叠加到图层上,并且通过动态设置标注方式显示要素属性为文字标注。 本章还是以行政区划边界为例,这个示例在开发中比较常用,建议收藏…

利用OpenCV实现图像拼接

一、介绍 图像拼接. 二、分步实现 要实现图像拼接,简单来说有以下几步: 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS:需要使用低版本的opencv,否则无法使…

解密顶象滑动拼图验证码:原理与识别方法详解

在网络世界中,验证码是一种常见的安全措施,用于识别用户是否真实、抵御恶意爬虫攻击。顶象滑动拼图验证码是一种常见而又具有挑战性的验证码形式。本文将详细介绍顶象滑动拼图验证码的原理,并提供一些常见的识别方法,帮助您更好地…

老版MFC工程迁移到VC2019编译EXE太大的问题

有个老版静态链接MFC库的MFC程序需要迁移到VC2019编译,直接用VC2019打开就会自动迁移过去,然后编译一下,生成的EXE大小将近3MB,老版的工程编译出来也就600多KB。 肯定哪里不对劲! 好一顿研究之后发现原来默认会把MFC…

【C语言学习】C语言的基础数据类型

一、数据类型 1.整型 short(短整型) int(整型 long(长整型) long long(长整型)没有特殊需要,就用int 2.浮点型 float(单精度型) double(双精度型&#xff…

Django的生命周期流程图(补充)、路由层urls.py文件、无名分组和有名分组、反向解析(无名反向解析、有名反向解析)、路由分发、伪静态

一、orm的增删改查方法(补充) 1. 查询resmodels.表名(类名).objects.all()[0]resmodels.表名(类名).objects.filter(usernameusername, passwordpassword).all()res models.表名(类名).objects.first() # 判断,判断数据是否有# res如果查询…

git清除历史纪录

Git 是一种常用的版本控制工具,被广泛用于项目开发中。在项目开发的过程中,我们通常会使用各种 git 命令来进行版本控制和管理,其中包括提交代码,合并分支等操作。然而,在某些情况下,我们可能需要清除 Git …

SAM在医学图像分割的一些研究(Segment Anything Model for Medical Images?(2023))

使用预训练模型通过两种主要模式进行分割,包括自动一切和手动提示(例如,点和框)。SAM在各种自然图像分割任务上取得了令人印象深刻的效果。然而,由于医学图像的形态复杂、解剖结构精细、物体边界不确定和复杂、物体尺度大,使得医学…

iOS——Block one

块类似于匿名函数或闭包,在许多其他编程语言中也存在类似的概念。 可以访问上下文,运行效率高 Block 以下是块的一些基本知识: 块的定义:块是由一对花括号 {} 包围的代码片段,可以包含一段可执行的代码。块的定义使…

Kotlin~Memento备忘录模式

概念 备忘录模式是一种行为型设计模式,用于捕获和存储对象的内部状态,并在需要时将对象恢复到之前的状态。 备忘录模式允许在不暴露对象内部实现细节的情况下,对对象进行状态的保存和恢复。 角色介绍 Originator:原发器&#x…

NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 论文阅读

论文信息 题目:NeRF-SLAM: Real-Time Dense Monocular SLAM with Neural Radiance Fields 作者:Antoni Rosinol, John J. Leonard, Luca Carlone 代码:https://github.com/ToniRV/NeRF-SLAM 来源:arxiv 时间&#xff…

【零基础学Rust | 基础系列 | 数据结构】元组,数组,向量,字符串,结构体

文章标题 简介:一,元组:1,定义元组:2,访问元组元素:3,元组解构:4,元组在函数中的应用: 二,数组:1,数组的声明和…

Redis-1

Redis 理论部分 redis 速度快的原因 1、纯内存操作 2、单线程操作,避免了频繁的上下文切换和资源争用问题,多线程需要占用更多的 CPU 资源 3、采用了非阻塞 I/O 多路复用机制 4、提供了非常高效的数据结构,例如双向链表、压缩页表和跳跃…

js怎么判断该值是是否在数组中

1.利用数组的includes()方法 includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。 var fruits [苹果,"香蕉", 榴莲, 橘子, 菠萝蜜,"梨子"]; if(fruits.includes(榴莲)){console.log("该值在数组…

QT以管理员身份运行

以下配置后,QT在QT Creator调试时,或者生成的.exe程序,都将会默认以管理员身份运行。 一、MSVC编译器 1、在Pro文件中添加以下代码: QMAKE_LFLAGS /MANIFESTUAC:\"level\requireAdministrator\ uiAccess\false\\" …

纯css实现登录表单动效

效果图&#xff1a; 代码展示 // 我这边用的是elementUI表单校验&#xff0c;更改的样式。 <el-form:model"form":rules"rules"ref"fromList":hide-required-asterisk"true"><el-form-item prop"account"><…

全网最强,Python接口自动化测试实战-接口参数关联(购物实例)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 什么是参数关联&a…

transformer学习

transformer 李宏毅老师的课&#xff1a;https://www.youtube.com/watch?vugWDIIOHtPA&listPLJV_el3uVTsOK_ZK5L0Iv_EQoL1JefRL4&index60 知乎上的文章&#xff1a;Transformer模型详解&#xff08;图解最完整版&#xff09; 主要参考tensorflow的官方文档&#xf…

【2023年电赛国一必备】C题报告模板--可直接使用

任务 图1 任务内容 要求 图2 基本要求内容 图3 发挥部分内容 说明 图4 说明内容 评分标准 图5 评分内容 正文 &#xff08;部分&#xff09; 摘要 本实验基于TI公司的TM4C123GH6PM主控&#xff0c;结合OPA2337芯片和其他硬件模块&#xff0c;设计并制作了一种单相逆变器…

OceanBase上的泡泡玛特抽盒机,轻松应对百倍流量峰值

8月3日晚10点&#xff0c;近百万年轻人再次同时涌入泡泡玛特的抽盒机小程序&#xff0c;参加抢抽盲盒新品的狂欢。 每周四的这个时刻&#xff0c;都是对抽盒机系统的一次技术大考。这个考验不但影响着用户体验&#xff0c;也直接影响着泡泡玛特的业绩。据2022年年度财报&#…