前端页面跳转参数加密工具类封装

一、可有可无的前言

       好几次提到前端页面跳转加密的问题，虽然每次大家都说，主要是加密工作还是在后端，但我心里还是好没底，毕竟，前端要不要加密？怎么加密？我没有答案，大家每次也只是列举了好多加密方法说可以试试，实际上目前没有一个人用过。就这样一直得过且过，反正大家都没有加密，又不是我一个人。

    今天突然想到这个问题，在网上看到一篇文章讲前端加密方法，我非常赞同一句话：既然市面上大部分锁都可以在20分钟内撬开，那门上装锁是否还有意义？（https://www.jianshu.com/p/caa07eb20324）。上周末（其实就是昨天）出门忘记带钥匙了，请了开锁师傅，开锁师傅利用门上的猫眼一分钟门就开了,我当时就愣住了，围观的几个人开玩笑说，这下子又该担心门是不是安全的问题……  一分钟就能打开的锁，那还设有上锁的必要吗？答案是肯定的！

二、工具类

•           使用window自带的加密解密方法    ：加密： btoa()，解密：atob()      
•           页面跳转时，使用JSON.stringify()序列化数据（对象转字符串）
•           目标页面使用JSON.parse() 反序列化数据（字符串转对象）

      1、加密工具类

/**    加密：跳转页面使用
 *     对前端页面跳转携带的参数加密
 *         返回值时 加密后的对象
 * @param queryObj:前端页面跳转时携带的参数
 *  @param key:结果的key，不传默认为q
 */
export function encryptJumpParam(queryObj: any, key?: string) {
  let result = {};
  let resultKey = key || 'param';
  // 判断参数是否为对象
  if (Object.prototype.toString.call(queryObj) === '[object Object]') {
    // 序列化后加密
    result[resultKey] = btoa(encodeURIComponent(JSON.stringify(queryObj)));
  } else {
    result = { param: '' };
  }
  return result;
}

     使用：

 

2、解密工具类

/**
 *    解密：目标页面使用
 *        返回解密后的对象
 * @param query：跳转页面传入的参数值
 */
export function decipheringParam(query: string) {
  if (query) {
    // 1、解密
    const decodeStr = decodeURIComponent(atob(query));
    //  2、将解密后的字符串转为对象
    let decodeObj = JSON.parse(decodeStr);
    return decodeObj;
  }
  return {};
}

使用：

        在基于pro4的脚手架中使用

三、自话自说

       工具类封装好了，在项目里面使用，没啥问题，于是和一个同事分享了。同事觉得还不错，建议我分享到公司前端群里。作为了一个群里面资深潜水隐形人，讲真，没有在群里聊天的i习惯。但想想公司还有季度绩效考核，疫情期间突然增加的绩效考核，大家都懂，也不想多吐槽什么了，反正只管“努力”就行。

      分享到群里后，预料之中的群体“赞”，脸刷的就红了，终于，生存战胜了某种莫须有的坚持，自己也变成曾经不那么想成为的人了！