使用 React Context 挂钩的用户身份验证

使用 React Context 挂钩的用户身份验证

用户身份验证是大多数应用程序的首要要求，可能是具有 CRUD 操作的简单电子商务网站，也可能是复杂的物流应用程序。通过身份验证，我的意思是在整个应用程序中存储用户登录信息。

问题陈述

对于 React，这个问题具有挑战性，因为我们想要存储用户是否登录并使其可供所有必需的子组件和父组件访问。

虽然登录信息（简单状态对象）可以通过简单地在 props 中传递信息来传递给应用程序中需要它的每个组件，但是这将非常麻烦，因为父级可以有多个子级，并且有自己的子级组件应用程序增长，跟踪状态和道具可能会变得非常困难。

This is a typical React Data flow diagram, with parent component having state information required by ** child**

一站式解决方案：反应上下文

根据官方文档，“ Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递 props ”

换句话说，React 为开发人员提供了一种方法，可以将一些信息传递给位于多个嵌套级别的多个组件，而无需显式地通过 props 向下传递数据。

因为，通过使用它，我们不必通过每个组件的道具传递大量登录信息，这应该解决我们最初开始的问题

这样做的方式是我们必须创建一个状态将保存登录信息的组件，创建一个 语境 并确保可能需要此上下文的子组件可以访问它

Context provider component will have the login information and child components can access it without props

上下文挂钩

为了本文档，我使用了 React 功能组件。但是使用类组件可以实现类似的功能。可以找到更详细的用法 这里

为了完成上述任务，我们需要一个组件来存储登录状态，然后将其作为上下文传递

在上面的代码中， AuthContextProvider 将所有用户登录信息存储在其状态中。该组件接受子组件（需要登录信息的组件），因为它支持并将所有组件包装在 AuthContext.Provider 标签，将其状态和状态函数作为数组传入 价值 道具。

在哪里放置子组件？

在我们继续讨论其中一个子组件之前，重要的是放置子组件以便它们可以访问上下文信息。由于 react 创建了一个虚拟 DOM，每个组件都简化为一个 HTML 标签，最终形成一个树型结构，其中父组件将数据传递给子组件

下边是 应用程序 将整个应用程序包装在一个组件中的组件。

很明显，我把所有的组件都放在里面 授权上下文 标记，原因是所有组件都以一种或另一种方式使用上下文（登录信息）。他们中的一些人更新它，一些人阅读它，有些人可能两者都做。

使用上下文挂钩

一旦我们完成创建上下文提供程序，我们需要确保子组件可以访问它并且可以在需要时更改状态。 React 有另一个名为 使用上下文。 这个钩子允许组件访问上下文值。

下面是 登录 允许用户输入名称和登录的组件

在上述组件中，在第 24 行， 使用上下文 钩子用于提取最初传递为的数组 价值 道具在 AuthContextProvider.js （第 15 行）

在第 39 行和第 40 行，该组件更新了上下文状态（ AuthContextProvider Component) 以便所有其他组件，无论它们存在于哪个嵌套级别，都可以引用更新的上下文状态。

Login 组件最初得到了 身份验证状态 成为 错误的 表示用户未登录。登录后，该组件更改了 身份验证状态 至 真的 使用 设置身份验证状态 来自上下文的函数，从而更改所有上下文消费组件的上下文状态和用户登录信息

This is how child component can update the context state and changes will be reflected for all the components consuming the context

包起来

最后，我们还希望当用户尝试访问私有组件（需要身份验证的组件）时，如果用户未通过身份验证，他/她应该被重定向到登录组件。为此，我们需要做的就是检查上下文状态，如果 身份验证状态 是 真的， 这将表明用户已登录，并继续正常流程，如果没有，则重定向到登录

下面是 私有路径 组件及其用法如上所示 应用程序 第 19 行的组件

结论

该解决方案应该适用于小型应用程序，但对于复杂的应用程序来说绝不是一种有效的解决方案。由于最终所有信息都存储在 Component State 中，因此在硬刷新时，组件将丢失状态信息。对此的解决方案是使用一些状态管理库，如 Redux。

此外，React 上下文可能不是存储用户信息的最佳解决方案，并且有各种警告。其中一些可以找到 这里

这个博客只是试图探索如何使用上下文来解决将信息传递到 props 到各种嵌套级别的问题。尽管不适用于大型应用程序中的用户信息，但这当然可以用于具有更特定类型信息的较少组件的上下文。

可以找到整个 Github 项目的链接 这里

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/1706/11493016