vue3 + crypto-js加密解密(普通版本/TS版本)_vue3 crypto-js-程序员宅基地

技术标签: vue3.0  vue3  typescript  

前言:

        在vue中使用crypto-js 来实现对密码的加密和解密。

vue3:

1、安装:

npm install crypto-js

2、封装方法 aes.js

import CryptoJS from 'crypto-js'

/**
 * AES 加密
 * @param word: 需要加密的文本
 * KEY: // 需要前后端保持一致
 * mode: ECB // 需要前后端保持一致
 * pad: Pkcs7 //前端 Pkcs7 对应 后端 Pkcs5
 */
const KEY = CryptoJS.enc.Utf8.parse('d7b85f6e214abcde')

export const AES_Encrypt = (plaintext) => {
  let ciphertext = CryptoJS.AES.encrypt(plaintext, KEY, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString()
  return ciphertext
}

/**
 * AES 解密
 * @param jsonStr
 */
export const AES_Decrypt = (jsonStr) => {
  let plaintext = CryptoJS.AES.decrypt(jsonStr, KEY, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  }).toString(CryptoJS.enc.Utf8)

  return plaintext
}

3、main.js中引入

//全局密码加密
import { AES_Encrypt, AES_Decrypt } from '@/utils/aes.js'

app.config.globalProperties.$AES_Encrypt = AES_Encrypt //全局加密
app.config.globalProperties.$AES_Decrypt = AES_Decrypt //全局解密

4、页面上使用

import { getCurrentInstance } from 'vue'

setup () {

        const { proxy } = getCurrentInstance()
        //加密
        let password = proxy.$AES_Encrypt(state.password)
}

vue3 - Ts版本:

1、安装:

npm install crypto-js
npm install --save @types/crypto-js

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41619796/article/details/123000333

智能推荐

YUV图像格式详解-程序员宅基地

文章浏览阅读1.2k次,点赞5次,收藏24次。相对于常见且直观的RGB颜色编码,YUV的产生自有其意义,它基于人眼对亮度比色彩的敏感度更高的特点,使用Y、U、V三个分量来表示颜色,并通过降低U、V分量的采样率,尽可能保证图像质量的情况下,做到如下3点:占用更低的存储空间数据传输效率更高兼容黑白与彩色显示具体是怎么做到的,本博文一一讲解_yuv

太原理工java实验报告_太原理工大学-JAVA实验报告.doc-程序员宅基地

文章浏览阅读809次。太原理工大学-JAVA实验报告本科实验报告课程名称: java语言程序设计实验地点: 明向校区综合实验楼专业班级: 软件1302学号:学生姓名: 李国涛指导教师: 李君婵时间:2014年 12 月 31 日实验名称Java语言基础实验目的和要求:通过实验,掌握Java语言程序设计的基本方法。学会Java语言中标示符的命名..._太原理工大学java实验报告

SQL server中将查询到的信息放在一张新表(或者另一个数据库)中_sqlserver把查询结果放进一个新表-程序员宅基地

文章浏览阅读2w次,点赞8次,收藏57次。SQL server将查询到的信息放在临时表中: select * into #临时表名 from 你的表; select * into ##临时表名 from 你的表。SQL server将查询到的信息放在数据库一张新表中: select * into table1 from (select * ..._sqlserver把查询结果放进一个新表

Android初步进阶之事件总线使用_intent事件总线-程序员宅基地

文章浏览阅读125次。不同的Activity和Fragment之间的信息交互,总是使用广播可不是个好办法。使用EventBus或者otto是个不错的选择。先说明一下EventBus的三要素以及它的四种ThreadMode。三要素:Event:事件。任意类型的对象。(浮想连篇)Subscriber:事件订阅者。Publisher:事件发布者。四种ThreadMode:POSTING(默认):发布事件和接收事件在一个线程中。MAIN:事件的处理会在UI的线程中执行。处理不能太长时间,否则会导致ANR。B_intent事件总线

美化HTML复选框(checkbox)的CSS样式_css checkbox样式美化-程序员宅基地

文章浏览阅读376次。在Web开发中,经常需要使用HTML复选框(checkbox)来实现用户的选择和多选功能。然而,默认的HTML复选框样式通常比较简单和普通,无法满足一些特殊设计需求。为了提升用户体验和界面美观度,我们可以使用CSS来自定义HTML复选框的样式。通过以上的HTML和CSS代码,我们成功地实现了一个自定义样式的HTML复选框。,我们为标签元素留出了空间来放置自定义的复选框样式,同时设置了。,我们将其定位在复选框内的适当位置,并设置了一些样式属性如。在上述代码中,我们使用了一个隐藏的复选框和一个相邻的。_css checkbox样式美化

Qt如何实现后台运行,无界面进程(不是系统托盘)_qt 界面程序转无界面工程-程序员宅基地

文章浏览阅读2.8k次。一招就好:_qt 界面程序转无界面工程

随便推点

busybox构建根文件系统_busybox mount-程序员宅基地

文章浏览阅读1.3k次,点赞2次,收藏14次。rootfs有两种格式:nfs方式启动的文件夹形式的rootfs和用来烧录的镜像形式的rootfs。一、busybox移植1、busybox下载busybox是一..._busybox mount

sass-loader版本过高_sass loader-程序员宅基地

文章浏览阅读8.6k次,点赞11次,收藏20次。今天在学习狂神的vue实战上手的时候运行项目就死了,配置了半天终于好了第一个错误:Module build failed: TypeError: loaderContext.getResolve is not a functionsass-loader版本太高 解决:(1和2选一个)修改配置文件,重新安装//1.修改sass-loader的版本为^7.3.1//2.重新安装配置环境npm install卸载当前,重新下载// 卸载当前版本npm uninstall sass_sass loader

C程序设计第五版(谭浩强)-第四章习题_1、什么是算术运算?什么是关系运算?什么是逻辑运算?-程序员宅基地

文章浏览阅读1.7k次,点赞5次,收藏12次。1、什么是算术运算?什么是关系运算?什么是逻辑运算?算术运算:即“四则运算”,是加法、减法、乘法和除法四种运算的统称;关系运算:所谓“关系运算”就是“比较运算”,将两个数值进行比较,判断其比较的结果是否符合给定的条件;逻辑运算:逻辑运算又称布尔运算,有与、或、非三种基本逻辑运算;2、C语言中如何表示“真”和“假”?系统如何判断一个量的“真”和“假”?C语言编译系统在表示逻辑运算结..._1、什么是算术运算?什么是关系运算?什么是逻辑运算?

iptables-程序员宅基地

文章浏览阅读65次。iptables介绍和禁icmpnetfilter --> iptables 防火墙名字是netfilter iptables是命令1.filter(过滤包,用的最多的,)内建三个链: 1.INPUT作用于进入本机的包 2.OUTPUT作用于本机送出的包 3.FORWARD作用于那些跟本机无关的包2.nat (主要用处是..._linux iptables 计数器 实现在哪

Win7/10-Anaconda3-【Python3.7】详细安装教程_python3.7版本的anaconda-程序员宅基地

文章浏览阅读1.1w次,点赞19次,收藏89次。Win7/10-Anaconda3-【Python3.7】详细安装教程一.资源下载二.安装过程2.1 详细过程2.2 环境变量三.检查是否安装成功3.1 检查开始菜单3.2 cmd控制台检查一.资源下载第一种方式(镜像下载)由于Anaconda3-python3.7属于老版本的,所以 Anaconda官网已经不存在了,大家可以去清华镜像下载自己所需要的,为什么去清华镜像下载呢?因为下载的快呀~链接: 清华镜像-Anaconda3-python3.7-5.3.1这个版本.第二种方式这个_python3.7版本的anaconda

《重构-改善既有代码》-程序员宅基地

文章浏览阅读1.2k次,点赞15次,收藏21次。1、如果你发现自己需要为程序添加一个特性,而代码结构使你无法很方便地达成目的,那就先重构哪个程序,使特性的添加比较容易的进行,然后再添加特性2、重构前,先检查自己是否有一套可靠的测试机制,这些测试必须有自我检验能力3、重构技术就是以微小的步伐修改程序,如果你犯下错误,很容易便可发现它4、任何一个傻瓜都能写出计算机可以理解的代码,唯有写出人类容易理解的代码,才是优秀的程序员5、重构(名词):对软件内部结构的一种调整,目的是在不改变软件可观察行为的前提下,提高其可理解性,降低其修改成本。