Docusaurus中的自定义登录页面

Question

我在工作中有一个任务，那就是在Docusaurus中实现登录页面。
我正在尝试通过添加一些HelloWorld来自定义index.js。其中包括具有实际Docusaurus索引页面的login.js。

const Index = require('./login.js');

const React = require('react');
class Button extends React.Component {
render() {
   return ("helloworld");}
} 
module.exports = Button;

但是抛出的错误是：
Error: 找不到模块'./login.js'

在Docusaurus中，是否可以从另一个js页面调用该类？

- Srini

Answer 1

我是Docusaurus维护者！是的，这是可能的，因为当前的模块系统是CommonJS。您必须将该组件放在与index.js相同的目录中。如果可能，请向我链接一个存储库，我可以帮助您查看。

顺便说一句，为Docusaurus构建登录表单并没有太多意义，因为Docusaurus生成的静态站点在页面导航过程中会丢失状态，除非您将它们持久保存在cookie或localStorage中。这将非常麻烦。也许您可以解释一下您想要构建什么，我可以为您推荐更好的替代方案。

- Yangshun Tay

---

我考虑在公司内部流程中使用这个，所以我想知道如何让它只对某些人可用... - fnaquira

我正在尝试做同样的事情：我有一个现有的Python API，它将设置一个cookie。如果用户点击受登录保护的页面并且没有设置cookie，则静态Docusaurus站点可能会以不同的方式呈现React组件（或直接重定向到/login）。对吧？在2022年的Docusaurus中是否有更好的标准实践？ - sscarduzio

Answer 2

我找到了一个解决办法，即使没有官方文档。我使用Docusaurus Swizzle介入Root组件，以便我可以使用Firebase身份验证（我认为您可以使用Auth0或任何自定义逻辑代替）。

我写了一篇详细的博客，希望能帮助其他人，你可以在这里看到：https://medium.com/@thomasdevshare/docusaurus-authentication-with-firebase-c824da24bc51 此外，文章中还有完整的示例源代码，您可以克隆它。

- Thomas Nguyen

---

我很好奇这是否是一种安全的方法。我对SSR还比较陌生，对一些事情还感到困惑。Firebase Auth在浏览器中运行。所以，它防止的是未经授权用户的渲染。但我不确定它如何防止将私有HTML文件发送给未经授权的用户。您能解释一下您的代码在SSR方面如何确保安全吗？ - Keunwoo Park

Answer 3

首先，“login.js”文件长什么样？它是一个具有良好定义（默认）名称空间的导出模块吗？

其次，您不应将文件扩展名添加到导入中。应该是“require（'./login'）”，而不是“require（'./login.js'）”。

- user237251