vue+element-ui表格实现隐私信息的加密展示和解密操作

最新推荐文章于 2024-09-20 11:00:29 发布

Pwsifeng

最新推荐文章于 2024-09-20 11:00:29 发布

阅读量2.3k

点赞数

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/Pwsifeng/article/details/125895532

版权

使用Vue和Element-UI框架，结合AES加密方法，实现表格内敏感信息的加密展示，并详细介绍了如何通过crypto-js库进行解密操作。解密过程在后端接口返回加密数据后进行，解密工具为crypto-js，通过在全局utils文件夹下创建crypto.js，定义解密函数，然后在获取接口数据后添加解密后的明文字段。在前端页面，通过点击眼睛图标在明文和密文之间切换显示。

摘要由CSDN通过智能技术生成

vue+element-ui表格实现隐私信息的加密展示和解密操作（AES方法）

注：加密数据和密匙都由后端接口返回，这里仅对加密数据进行解密展示。

解密工具： crypto-js 地址 : https://www.npmjs.com/package/crypto-js

下载安装 crypto-js ：

npm install crypto-js

1.在全局utils下新建crypto.js文件，创建解密方法！

import CryptoJS from'crypto-js';
/**
 * @method 解密服务器端密文
 * @param {string} key 秘钥
 * @param {string} content 密文
 */
export const decrypt = (key = "", content = "") => {
   
  // 简单参数校验
  if ( key === "" || content === "") return {
   
    isSuccessed: false,
    data: '',
  };
  try{
   
    const newKey = CryptoJS.enc.Utf8.parse(key);
    const arrData = CryptoJS.AES.decrypt(content, newKey, {
   
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    });
    // toString
    const