前端数据CryptoJS加密解密

2 篇文章 0 订阅
1 篇文章 0 订阅

背景

    由于上周五开会领导提到对前端数据加密这一块要做处理,跟后台讨论了一下,决定采用CryptotoJS
 AES+BASE64算法加密。
具体实现

本方法是在基于vue项目。之前是在localstorage存了用户信息字段采用了AES、DES加密解密,所以对于对象加密也是同样的方法。在这里插入图片描述
加密得过程主要是跟后台同步数据,就是我前端加密的方法在后台它可以通过相对应的解密方法进行解密就是密钥要相同,这里主要就是:在这里插入图片描述
在这里主要做了一个demo话不多说上代码;

<template>
  <div class="hello">
    before:{{ this.before }}
    <br />
    after:{{ this.after }} <br />
    jiemi:{{ this.jiemi }}
  </div>
</template>
<script>
import { AES, DES } from "@/common/utils";
export default {
  name: "HelloWorld",
  data() {
    return {
      before: null,
      after: null,
      jiemi: null
    };
  },
  created() {
    this.before = JSON.stringify({ id: 1, name: "哦也" });
    this.before = JSON.stringify({
      channel_Id: 1283327964682915840,
      title: "这是测试栏目的内容1",
      keywords: "",
      summary: "",
      cover_Image: "",
      is_Top: 1,
      is_Carousel: 0,
      content_Detail: "这是测试栏目的内容1",
      view_Count: 1,
      audit_Status: 1,
      sort_Index: 990
    });
    this.after = AES(this.before);
    this.jiemi = DES(this.after);
  }
};
</script>

执行代码可以看到,在请求体中是一个base64编码。这个我跟我们后台约定的是加一个约定的字段,当我请求头传入指定字段 会告诉他需要进行解密数据,反之不处理
在这里插入图片描述
同时配置KEY与IV
在这里插入图片描述
这个时候可以看一下请求接口
在这里插入图片描述
最后基本上数据加密到这里就完成啦。
主要参考文章 https://www.cnblogs.com/wz122889488/p/6899615.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值