仅当在上一页上单击按钮时才重定向答案

【问题标题】：Redirection only if the button is clicked on the previous page仅当在上一页上单击按钮时才重定向
【发布时间】：2020-11-26 23:06:12
【问题描述】：

只有在上一页上单击按钮时，我才尝试实现重定向。我是JS新手，所以请温柔。

例如：
当用户进入登录页面时，他们有这个按钮：

<button type="submit" class="form-login-submit" name="login" value="Log in">Log in</button>

当您点击登录按钮时，您将被重定向到包含此类 member-logged-in in body 的“我的帐户”页面。

所以，这是我的代码：

const logInBtn = document.querySelector('.form-login-submit');

logInBtn.addEventListener('click', () => {
  window.onload = () => document.body.classList.contains('member-logged-in') ? window.location.href = 'www.test.com' : '';
});

但是当用户被重定向到我的帐户页面时，我收到了这个错误，我认为是因为该页面上缺少登录按钮：

未捕获的类型错误：无法读取 null 的属性“addEventListener” 在（索引）：691

感谢任何帮助。

【问题讨论】：

这背后的目标是什么？如果人们点击了一个按钮，你为什么要重定向他们？
目标是在他们登录后被重定向并跳过“我的帐户”页面。但只有在他们登录后（点击按钮后）。如果他们稍后返回“我的帐户”页面，则不会发生任何事情。

标签： javascript dom-events

【解决方案1】：

您可以使用localStorage 解决此问题。也许这是一个肮脏的解决方案，但它会起作用。

const logInBtn = document.querySelector('.form-login-submit');
const isPage = window.document.href = 'https://test.com/my-account/';

logInBtn ? logInBtn.addEventListener('click', () => localStorage.setItem('justLogin', 1)) : 0;

if (isPage == 'https://test.com/my-account/' && localStorage.getItem('justLogin') && document.body.classList.contains('member-logged-in')) {
    localStorage.removeItem('justLogin');
    window.location.href = 'https://test.com/members/';
}

【讨论】：

【解决方案2】：

只需保留代码的window.onload = () => document.body.classList.contains('member-logged-in') ? window.location.href = 'www.test.com' : ''; 部分即可。

这假设您已经有了一些功能，如果单击按钮，则可以将该类添加到 body 元素中。

【讨论】：

但是这样一来，用户每次访问我的账户页面都会被重定向。目标仅在登录后重定向一次（点击登录按钮后）
@Marko，登录操作实际上是在服务器上完成的。让服务器发送 HTTP 重定向响应标头会容易得多。单击登录按钮并不能保证用户实际插入了他的凭据，也不能保证这些凭据是正确的。

【解决方案3】：

const logInBtn = document.querySelector('.form-login-submit');

logInBtn.addEventListener('click', () => {
  //window.onload = () => document.body.classList.contains('member-logged-in') ? window.location.href = 'www.test.com' : '';
});

window.onload = () => {
    var logInBtn = document.querySelector('.form-login-submit');
    logInBtn.addEventListener('click', () => {
        var el = document.querySelector('.any-element');
        if(el.classList.contains('member-logged-in')){
            window.location.href = 'www.test.com?click=true';
            / Now it's clear on the server that there was a click from the previous page
        } 
    }
}

【讨论】：

【解决方案4】：

您在项目中使用 Vanilla Javascript，并且在您的帐户页面上加载了相同的脚本。添加一个 if 检查您的 addEventListener 就完成了。

const logInBtn = document.querySelector('.form-login-submit');

if(logInBtn) {
  logInBtn.addEventListener('click', () => {
    window.onload = () => document.body.classList.contains('member-logged-in') ? window.location.href = 'www.test.com' : '';
  });
}

【讨论】：

好的和简单的逻辑，但由于某种原因，这不起作用。控制台中也没有错误。