vue crypto-js加解密

2023-11-14

1.安装crypto-js

npm install crypto-js --save

2.编写encrypt.js 

const CryptoJS = require('crypto-js'); 
import md5 from 'js-md5';
var key_str = 'B120F1D92561A123';  //16位12进制字符串 ---秘钥
var iv_str ='1A123B120F1D9256';    //16位12进制字符串 ---偏移量
var key = CryptoJS.enc.Utf8.parse(key_str);
var iv = CryptoJS.enc.Utf8.parse(iv_str);


//加密方法
export function Encrypt(str) {
    let srcs = CryptoJS.enc.Utf8.parse(JSON.stringify(str));
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
}

//解密方法
export function Decrypt(str) {
    var decrypted = CryptoJS.AES.decrypt(str, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7
    });
    return  JSON.parse(CryptoJS.enc.Utf8.stringify(decrypted));
}

key_str:加密秘钥

iv_str:偏移量

3.axios请求拦截 进行加解密

  


import {
    Encrypt,
    Decrypt
   
} from "./cryptoJS.js"

const service = axios.create({
    baseURL: BASE_URL, 
    timeout: 30 * 1000 
});

//请求拦截进行参数加密
service.interceptors.request.use(
    config => {

        if (config.method == 'get' && config.params) {
            config.params.sign = objKeySort(config.params);
            config.params = {
                mini_sign: Encrypt(config.params)
            }
        }
        if (config.method == 'post' && config.data) {
            config.data.sign = objKeySort(config.data);
            config.data = {
                mini_sign: Encrypt(config.data)
            }
        }
        return config;
    },
    error => {
        // Do something with request error
        Promise.reject(error);
    }
);


// respone拦截器
service.interceptors.response.use(
    response => {
        //响应时进行解密
        let data = response.data;
        if (data.data && data.data.result) {
            data.data = Decrypt(data.data.result);
        } 
      
        return data;
    },
    error => {
        Message({
            message: error.message,
            type: "error",
            duration: 5 * 1000
        });
        return Promise.reject(error);
    }
);

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue crypto-js加解密 的相关文章

随机推荐

  • 服务器系统环境初始化,Centos7系统

    服务器初始化环境 更新yum源 并添加必要系统工具 修改时区 设置系统时间 ntpdate时间同步服务 修改字符集zh CN UTF 8 关闭selinux 内核优化sysctl conf 调整文件描述符ulimit 即单个进程的最大文件打
  • 模拟电路设计的九个级别,你是模电几段?

    众 生 所 搬 周 硬 知 套 模拟电路设计的九个级别 类似下围棋的段位 快来看看自己处于什么水平 感觉九段已经是世外高人了 一段 你刚开始进入这行 对PMOS NMOS BJT什么的只不过有个大概的了解 各种器件的特性你也不太清楚 具体设
  • VSCode——修改VSCode背景图片

    1 以管理员身份运行VS Code 安装background插件 2 打开设置 在搜索框中输入background 选择扩展中的plugin background 选择在setting json中编辑 3 在用户设置中输入以下代码 修改完后
  • [QT入门篇]信号槽机制

    一 信号与槽的引入 信号与槽 Signal Slot 是 Qt 编程的基础 信号槽 实际是观察者模式 发布 订阅模式 当某个事件发生之后 比如 按钮检测到自己被点击了一下 它就会发出一个信号 signal 这种发出是没有目的的 类似广播 如
  • 【NLP】第 1 章 :机器阅读理解简介

    大家好 我是Sonhhxg 柒 希望你看完之后 能对你有所帮助 不足请指正 共同学习交流 个人主页 Sonhhxg 柒的博客 CSDN博客 欢迎各位 点赞 收藏 留言 系列专栏 机器学习 ML 自然语言处理 NLP 深度学习 DL fore
  • Python可视化-气泡图

    气泡图类似散点图 也是表示XY轴坐标之间的变化关系 也可以像彩色散点图给点上色 区别在于可以通过图中散点的大小来直观感受其所表示的数值大小 一 数据文件准备 1 PeopleNumber csv city people price NJ 8
  • Android VNDK的作用

    本文目的是让你理解VNDK是什么作用 暂不做细节讲解 在Android 8 0及更高版本中 引入了很多技术都是为了将system和vendor分离 这样设备厂商和芯片供应商只需关心vendor实现 那么vendor实现时要加载framewo
  • 【总结】前端常用编码写法合集

    一 css样式 1 文字多行溢出 单行溢出 overflow hidden white space nowrap text overflow ellipsis 多行溢出 display webkit box webkit box orien
  • Vue教程(一):Vue核心

    Vue教程 一 Vue核心 1 1 Vue简介 1 1 1 Vue是什么 一套用于构建用户界面的渐进式JS框架 1 1 2 谁开发的 尤雨溪 2015 10 27 正式发布 Vue1 0 0 Evangelion 新世纪福音战士 2016
  • C语言 结构体初阶

    头文件 define CRT SECURE NO WARNINGS 1 include
  • 毕设系列三之利用tensorflow做深度学习情感分析

    利用tensorflow做深度学习情感分析 深度学习作为一项学习数据的多层特征或表征的强大机器学习技术 此项目中 将使用tensorflow深度学习平台 通过相关模型的构建 以及数据的处理 完成微博评论情感分析 已到达类似百度AI情感分析功
  • 多态(polymorphic)

    目录 1 多态的基本介绍 2 多态实现条件 3 重写 重写的介绍 重写和重载的区别 动 静态绑定机制 5 向上转型和向下转型 向上转型 向上转型的特点 总结 向下转型 多态的优缺点 多态是Java三大基本特征中最抽象也是最重要的特征 多态是
  • Html获取Url参数 解决中文乱码

    Html 获取 Url 参数 解决中文乱码 方法一 分割为数组 function getQueryVariable name var query window location search substring 1 var vars que
  • hibernate 反向生成数据库表

    hibernate 配置属性中 hibernate hbm2ddl auto可以帮助你实现正向工程 即由 java 代码生成数据库脚本 进而生成具体的表结构 在hibernate cfg xml中 java 代码 html view pla
  • idea

    1 本人最近刚开始切换到 Intellij idea 发现一个问题 maven工程项目老是有红色下划线提示错误 Cannot Resolve Symbol 但是这些依赖都已经通过pom引进了 idea的Library中也能看到 试一下Fil
  • mysql 建表语句 及完整案例

    1 最简单的 表名为name info 只包含id列和name列 执行sql语句 CREATE TABLE name info id int not null name char 12 2 将id列设置为主键 执行sql语句 CREATE
  • 数据结构Java实现06----中缀表达式转换为后缀表达式

    本文转载至 http www cnblogs com smyhvae p 4790373 html 本文主要内容 表达式的三种形式 中缀表达式与后缀表达式转换算法 一 表达式的三种形式 中缀表达式 运算符放在两个运算对象中间 如 2 1 3
  • 【华为OD机试真题 JS】火锅

    标题 火锅 时间限制 1秒 内存限制 262144K 语言限制 不限 入职后 导师会请你吃饭 你选择了火锅 火锅里会在不同时间下很多菜 不同食材要煮不同的时间 才能变得刚好合适 你希望吃到最多的刚好合适的菜 但是你的手速不够快 用m代表手速
  • [培训-无线通信基础-2]:无线电磁波传播机制(传播、衰减、链路预算)

    作者主页 文火冰糖的硅基工坊 https blog csdn net HiWangWenBing 本文网址 https blog csdn net HiWangWenBing article details 118667807 引言 既然无
  • vue crypto-js加解密

    1 安装crypto js npm install crypto js save 2 编写encrypt js const CryptoJS require crypto js import md5 from js md5 var key