DR：这是关于如何使用巢.js、React、TypeScript和MongoDB。在第一部分中，您可以使用巢.js，通过利用Auth0基础设施保护API，然后最终将数据持久化到MongoDB数据库中。在这里，您将使用React和TypeScript构建前端，从而使应用程序更进一步。如果您愿意直接进入代码，可以在这个GitHub存储库中找到贯穿本系列开发的完整源代码。总结第1部分在本教程的第一部分中成功地为API创建了后端逻辑之后，您确保了某些端点（例如，只有经过身份验证的用户才能访问）：获取：/blog/post放置：/blog/edit删除：/blog/DELETE作为概念证明，您在Auth0上使用了一个测试应用程序，并从auth0api管理仪表板获取了一个测试访问令牌。这确保了对后端API的访问是受控制的，因此，您的应用程序得到了保护。要了解本系列第一部分的整个指导原则和代码结构，请单击此链接并在完成后返回本部分。确保您在后端应用程序中，并使用以下命令启动：//进入应用程序cd博客后端//启动应用程序npm运行开始：dev此外，您还可以从其他终端运行MongoDB实例：sudo mongod公司用React和TypeScript构建前端如前所述，将使用TypeScript代替使用JavaScript构建React应用程序。这与使用React构建和构建应用程序的传统方式完全不同。有了出色的类型推断、自动完成和类型安全，您可以很容易地在早期阶段发现代码中的错误。使用TypeScript，您可以很容易地在早期阶段发现代码中的错误在推特上留言安装和配置TypeScript React starter接下来，您将使用一个名为createreact app的工具，用一个命令安装和设置React应用程序。此工具具有内置的支持，可以在不需要任何额外配置的情况下使用TypeScript。为了方便地在本教程中使用createreact app的最新版本，您将使用npx命令，这是npm5.2+附带的一个包运行工具。现在，运行以下命令创建并安装名为blog frontend的新React应用程序：npx create react app blog frontend--模板typescript前面的命令将创建一个名为blog frontend的新React应用程序。--template typescript标志将React组件的默认文件类型设置为.tsx。接下来，在您完成这一部分之前，应用程序将需要从一个页面导航到另一个页面。要设置它，您需要为React应用程序安装一个名为React Router的路由库及其相应的TypeScript定义。您将使用yarn为这个项目安装库和其他包。这是因为yarn速度更快，尤其是在安装React应用程序的依赖项时。移到新创建的项目文件夹中，然后使用以下命令安装React Router：//移到文件夹中cd博客前端//安装React路由器纱线添加反应路由器反应路由器dom现在您有了React Router包，它将在您的项目中提供路由功能。接下来，运行以下命令以安装React Router的TypeScript定义：纱线添加@types/react router@types/react router dom完成后，使用以下命令启动开发服务器：//运行应用程序纱线起动导航到本地主机：3000到查看应用程序。您应该看到："纱线很快。尤其是在安装React应用程序的依赖项时。"在推特上留言创建Auth0单页应用程序在开始为应用程序实现所需的逻辑之前，需要在Auth0上设置一个单页应用程序。登录到Auth0仪表板，然后转到Auth0管理仪表板的"应用程序"部分，然后单击"创建应用程序"。在将显示的表单中输入应用程序的首选名称（例如，嵌套项目应用程序）。接下来，从应用程序类型列表中选择"单页Web应用程序"，然后单击"创建"按钮完成此过程：完成后，您将被重定向到可以查看应用程序详细信息的页面。现在，单击该页上的"设置"选项卡并向下滚动以找到以下字段：允许的回调URL允许的Web源允许的注销URL使用：3000作为每个字段的值，因为您的React应用程序在开发期间可以访问该URL。如果您的应用程序已经在生产中，可以使用不同的URL。接下来，您现在可以单击savechanges按钮。复制域、客户机ID和客户机密码，并将其保存到您很快需要的位置。安装Auth0单页应用程序SDK在构建需要身份验证和授权的JavaScript应用程序时，Auth0通过JavaScript SDK做出了一些规定，以简化过程。直到最近，促进身份验证集成的首选库是auth0.js。JavaScript应用程序仍然支持使用这种方法，但Auth0鼓励用户使用新创建的SDK。它是一个新升级的库，名为Auth0单页App SDK。它专为在单页应用程序中使用而设计，以使用业界最佳实践来确保它们的安全性，而且还具有许多好处，例如：遵循行业和服务最佳实践，保护开发人员不受安全隐患的影响重约7kb缩小和压缩单个页面所需代码更少您将把新的SDK集成到您的应用程序中。作为集成所需步骤的一部分，您需要安装Auth0 SPA SDK。通过在计算机上按CTRL+C停止应用程序的运行，然后运行以下命令：纱线添加@auth0/auth0 spa js前面的命令将在应用程序中安装库。要使其在应用程序的任何组件中全局可用，您将使用React Context。这提供了一种通过组件树传递数据的方法，而不必将属性向下传递到子组件。创建React上下文以存储应用程序的身份验证信息在本节中，您将正确配置Auth0 SPA SDK，使其能够提供以下功能：验证用户获取为用户生成的Id令牌检索当前登录用户的详细信息检查用户是否经过身份验证首先，在src文件夹中创建一个名为contexts的新文件夹。接下来，导航到新创建的文件夹并创建一个名为auth0的新文件-上下文.tsx在里面。使用以下内容填充新文件：//博客前端/src/contexts/auth0-上下文.tsx从"React"导入React，{Component，createContext，useContext}；从'@auth0/auth0 spa js'导入createAuth0Client；从'@auth0/auth0 spa js'导入Auth0Client；接口ContextValueType{我被认证了？：布尔值，用户？：任何，正在加载？：布尔值，handleRedirectCallback？：（）=>无效，getIdTokenClaims？：（…p:any）=>任何，loginWithRedirect？：（…p:any）=>任何，感觉到了吗？：（…p:any）=>任何，注销？：（…p:any）=>任何}//创建上下文export const Auth0Context:any=createContext（null）；export const useAuth0:any=（）=>useContext（Auth0Context）；接口IState{auth0Client:任何，正在加载：布尔值，isAuthenticated:布尔型，用户？：任何；}导出类Auth0Provider扩展组件{首先，从React和Auth0 SPA SDK导入所需的模块。接着创建了一个接口，用于定义在创建Auth0Context时应作为选项传递的特定类型的值。另外，您将Auth0Context传递给React的useContext（）钩子。这是为了创建Auth0Context的全局状态，并便于在应用程序中的所有组件之间共享。最后，您为Auth0Provider（）创建了一个接口，该接口扩展了React组件。Auth0Provider（）将用于包装整个应用程序，以便可以在任何地方调用身份验证函数；您将在本教程的后面进行此操作。接下来，使用适当的配置选项初始化Auth0 SPA SDK，如下所示：//博客前端/src/contexts/auth0-上下文.tsx...导出类Auth0Provider扩展组件{建造师（道具：任意）{超级（道具）这个州= {正在加载：是的，isAuthenticated:错误，用户：空，auth0Client:auth0Client，};}配置：Auth0ClientOptions={域：`${process.env.REACT_APP_AUTH0_域}`,客户机号：`${process.env.REACT_APP_AUTH0_客户端_ID}`,重定向\u uri:窗口.位置.原点};组件didmount（）{this.initializeAuth0();}//初始化auth0库initializeAuth0=异步（）=>{const auth0Client=等待createAuth0Client(this.config文件);此设置状态（{auth0Client}）；//检查它们是否在登录后被重定向如果(窗口.位置.搜索.includes（'code='）{返回this.handleRedirectCallback();}const isAuthenticated=等待身份验证0Client.i已验证();const user=已验证？等待身份验证0客户端.getUser（）：空；此设置状态（{isLoading:false，isAuthenticated，user}）；};渲染（）{}}在这里，您创建了一个Auth0Provider组件并初始化了Auth0 SPA SDK，方法是通过具有Auth类型的private config（）方法将适当的配置传递给它