关于前端url加密方式总结 (Vue-cli中使用)

最新推荐文章于 2024-07-19 17:39:27 发布

weixin_30672019

最新推荐文章于 2024-07-19 17:39:27 发布

阅读量3.2k

点赞数

文章标签： javascript 前端 json ViewUI

原文链接：http://www.cnblogs.com/sixthrhapsody/p/11377932.html

版权

本文总结了在前端开发中如何对URL参数进行加密处理，以保护敏感信息并防止用户手动修改链接内容。通过在页面跳转前加密参数，并在页面加载时解密，实现简单但有效的安全防护。文中提供了加密和解密方法的实现，以及在Vue-cli项目中应用这些方法的示例，包括在路由拦截器和页面生命周期中的使用。同时，还讨论了加密的局限性和应对篡改参数的策略。

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

有的时候链接信息中存在敏感信息或者不想让用户手动修改链接从而改变内容，这时候就需要进行链接加密处理，虽然这种方式只能简单的预防，不过还是能起到一定作用的，这里根据我的思路进行总结处理方式

首先网站页面url都有对应的不同路径组成，这个地方不用修改(当然也可以自己扩展)，后边可能会拼接一些参数对这串参数进行处理；

思路就是在页面跳转前进行拦截修改参数部分，及在改变页面某些状态需要改变url内容时进行修改参数部分；

那么页面在重新载入或者进入时，首先需要进行对页面的加密参数解密到对应字段上进行后边的参数处理；

下边是url加密和解密方法

/**
 * url参数加密
 * 传入json格式的串
 * @param {*Object} query
 */
const EncryUrl = query => {
  if (!utils.isObject(query)) {
    return "";
  }
  try {
    query = JSON.stringify(query);
    query = window.encodeURIComponent(query);
    return window.btoa(query); // 编码
  } catch (err) {
    console.log('%c url-encry-error：' + JSON.stringify(err), 'color:red;');
  }
  return "";
}

/**
 * url参数解密
 * 传入加密的