前端数据CryptoJS加密解密

背景

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

具体实现

本方法是在基于vue项目。之前是在localstorage存了用户信息字段采用了AES、DES加密解密,所以对于对象加密也是同样的方法。前端数据CryptoJS加密解密_第1张图片
加密得过程主要是跟后台同步数据,就是我前端加密的方法在后台它可以通过相对应的解密方法进行解密就是密钥要相同,这里主要就是:前端数据CryptoJS加密解密_第2张图片
在这里主要做了一个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

你可能感兴趣的:(cookie,js,CryptoJS)