使用JavaScript（Netlify Identity）门控内容：内容在慢速连接中闪烁，如何仅在登录检查后加载？

Question

我不是真正的 Web 应用程序开发人员，我想询问有关控制网站内容的最佳做法。

我正准备部署使用 mkdocs 创建的文档。它使用 Netlify Identity，因为 Github 身份验证无需任何编码即可使用。

我目前的解决方案：我在head中添加了Netlify Identity脚本，在mkdocs中通过模板插件添加了login/logoff按钮，然后创建了一个静态文档/login /（在 mkdocs 中自动获取，但不会使用模板生成）。

在标准模板中有一个 JS 重定向到 /login/ 除非用户已登录：

if (window.netlifyIdentity) {
 window.netlifyIdentity.on("init", user => {
  if (!user) {
    document.location.href = "/login/";
  }
});
}

在静态页面上，只有在用户登录后才会重定向到 /：

  if (window.netlifyIdentity) {
    window.netlifyIdentity.on("init", user => {
      if (!user) {
        window.netlifyIdentity.on("login", () => {
          document.location.href = "/";
        });
      }
    });
  }

我希望这是一种合理的解决方法。文档不存储任何重要内容，但我仍然不希望公开该内容。

但我注意到在慢速连接时重定向需要一两秒钟，因此当访问深度 URL 时，内容会在登录前在屏幕上闪烁。

如何才能停止此操作并仅在执行登录检查后才加载内容？

Answer 1

这不会像您希望的那样工作并且不安全。

如果我想在没有帐户的情况下阅读您的内容，只需 disable JavaScript 在我的浏览器中（点击几下鼠标）即可加载您的网站，但重定向永远不会运行。

无论如何，启用 JavaScript 后，其工作方式是浏览器下载页面，然后下载任何资源（包括脚本），最后运行任何脚本。没有办法改变这一点。当然，在一个快速的系统上，用户可能感觉不到延迟，因为延迟很短，但延迟总是存在的。这就是浏览器的工作方式。

如果您不希望您的用户在登录后才能访问这些信息，那么您必须在他们登录后才能将信息发送出去。换句话说，您需要配置您的服务器在收到用户有权接收该信息的验证之前，根本不发送该页面。你如何做到这一点取决于你使用的服务器等等，这将是一个单独问题的主题。

Answer 2

我知道这是旧的 post 但您可以结合使用 netlify 函数和 netlify 重定向文件。

您在使用元数据注册时必须设置用户角色，您可以使用挂接到 netlify 身份的 netlify 函数来完成此操作，更多 here。

创建一个名为 identity-signup.js 的函数，当用户注册时会自动调用此函数。

exports.handler = async (event) => {
    const { user } = JSON.parse(event.body)
    // you could do something with the user here: eg console.log(user.email)
    // or using stripe: const customer = await stripe.customers.create({ email: user.email });
    return {
        statusCode: 200,
        body: JSON.stringify({
            app_metadata: {
                roles: ['free']
            }
        })
    }
}

拥有角色后，您可以像这样简单地创建一个 _redirects 文件：

/authedcontent/* 200! Role=free
/authedcontent/ / 404

稍后您可以扩展 netlify 功能以将用户详细信息保存在外部数据库中，或者设置条带订阅。

唯一需要注意的是，这需要一个付费的 netlify 帐户。

使用JavaScript（Netlify Identity）门控内容：内容在慢速连接中闪烁，如何仅在登录检查后加载？

Gating content with JavaScript (Netlify Identity): Content flashes in slow connections, how to only load it after log in check?

javascript

netlify

mkdocs