欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端数据CryptoJS加密解密

程序员文章站 2022-05-15 14:36:20
...

背景

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

具体实现

本方法是在基于vue项目。之前是在localstorage存了用户信息字段采用了AES、DES加密解密,所以对于对象加密也是同样的方法。前端数据CryptoJS加密解密
加密得过程主要是跟后台同步数据,就是我前端加密的方法在后台它可以通过相对应的解密方法进行解密就是**要相同,这里主要就是:前端数据CryptoJS加密解密
在这里主要做了一个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编码。这个我跟我们后台约定的是加一个约定的字段,当我请求头传入指定字段 会告诉他需要进行解密数据,反之不处理
前端数据CryptoJS加密解密
同时配置KEY与IV
前端数据CryptoJS加密解密
这个时候可以看一下请求接口
前端数据CryptoJS加密解密
最后基本上数据加密到这里就完成啦。
主要参考文章 https://www.cnblogs.com/wz122889488/p/6899615.html