2

这是注销逻辑，这里的键logoutoverlay设置在本地存储中。

   <div className="logout">
              <NavLink href={propsData.userDataTopNavLinkList.logout} onClick={() => {
                localStorage.removeItem("manage");
                localStorage.removeItem("token");
                localStorage.removeItem("auth");
                localStorage.removeItem("AccountInfo");
                localStorage.removeItem("successfullySet");
                localStorage.removeItem("userImpression");
                localStorage.removeItem("cartCnt");
                localStorage.removeItem("callDuration");
                localStorage.removeItem("customGeoIPInfo");
                localStorage.removeItem("geoipInfo");
                localStorage.setItem("logoutoverlay","form overlay")
              }}>  {dictionary.t("Logout", "LOGOUT")}</NavLink>
            </div>

在 Main.js 中，localStorage检查本地的键logoutoverlay

    if(localStorage.getItem("logoutoverlay"))
   {
    logoutDataLayer(localStorage.getItem("logoutoverlay"));
    localStorage.removeItem("logoutoverlay");
   }

在 dataLayerAnalytics.js 中，项目被推送到数据层

 export const logoutDataLayer = (logoutplace) => {

  let logoutDatalayer = {
    "event": "loyaltyLogout",
    "logoutContext": logoutplace
  }
  window.dataLayer.push(logoutDatalayer);
}

所有这些在我的本地机器上运行良好。但是在我将它部署到生产环境之后localStorage.removeItem("logoutPlace")，Main.js 内部没有被执行，代码也无法到达localStorage.removeItem("logoutPlace")。这就是为什么“logoutoverlay”项不会从本地存储中删除的原因。

而且由于我无法在本地系统上复制此问题，因此我什至无法调试代码。

4

1 回答 1

0

介绍

你的问题陈述是

localStorage.removeItem("logoutoverlay");

未在 prod 上执行，但已在您的 dev env 上成功执行。由于我们没有您的源代码，我们无法确定问题所在，但我们可以告诉您如何找出问题所在。这个答案的重点是找出问题所在的方法。

如何调试 prod 的客户端

如果您的源代码在 prod 上可用，那么您可以通过浏览器开发工具的 Sources 选项卡调试用 Javascript 编写的客户端代码。您可以通过以下方式访问它：

右键单击页面上的任意位置 -> 单击检查/检查元素（文本因浏览器而异） -> 出现开发工具，通常默认显示元素选项卡 -> 单击源 -> 找到 Main.js 并单击在那

现在，在您的 Main.js 中，您可以单击源代码行的最左侧边缘以放置断点，然后您可以从那里进行调试。

如果客户端代码在 prod 上被缩小，那么您有几个选项可以继续。您可以将缩小的脚本下载到您的开发环境中并临时使用它进行调试。或者，您可以在 prod 上实现测试模式，这将允许您加载和使用原始的，而不是缩小的 js 代码，这将允许您在浏览器中调试 prod 的客户端代码。

确保将苹果与苹果进行比较

当然，您的服务器可能有不同版本的客户端代码，其行为不同。确保您在服务器上具有与您的开发环境中相同的源代码，因为如果它们不同，那么它们的行为不同也就不足为奇了。为此，您需要：

  • 清除浏览器缓存或以隐身模式打开页面，以避免被服务器或客户端加载到浏览器中的旧文件版本误导
  • 如果您有缓存，请清除您的服务器缓存，因为这会阻止新代码在一段时间内被使用
  • 从服务器下载 Main.js 并研究它，可能会将它与您在开发环境中的 Main.js 进行比较
  • 如果您不使用版本控制器，那么是时候开始使用版本控制器了。如果您有版本控制器，那么使用它查看最新提交的提交哈希和两者都在使用的分支，可能拉/推以确保版本相同

检查客户端和服务器端的用户状态

这是您的代码有问题的部分：

if(localStorage.getItem("logoutoverlay"))
{
    logoutDataLayer(localStorage.getItem("logoutoverlay"));
    localStorage.removeItem("logoutoverlay");
}

也许在您的服务器上localStorage您没有logoutoverlay。也许您在跟踪该值之前已经登录到您的服务器，并且从那以后再也没有登录过。如果只是用户状态的问题，那么基本上问题只是应对版本的差异。

部署会话逻辑更改时要注意用户状态

您实现了一些注销逻辑，它在内部假设一些值localStorage。如果该值不在 inside 怎么办localStorage，因为用户在创建它的更改被部署之前登录。您最不想看到的就是一些中断的用户会话，因此请确保您的工作涵盖了用户在部署之前登录并且他们的会话仍然存在的情况。如果在部署期间所有会话都被销毁，那么这不是一个实际问题。

于 2021-02-08T12:03:53.693 回答