使用 Nanostores 和 Context API 在 React 应用程序中处理身份验证

在我开始使用 ReactJs 构建全栈 Web 应用程序时，我发现自己对如何在前端处理身份验证感到困惑。我的意思是，从后端收到访问令牌后，您下一步应该做什么？如何保留登录状态？

大多数初学者会认为“哦，只需将您的令牌存储在状态中即可”。但我很快发现这不是最好的解决方案，甚至根本不是一个解决方案，因为正如大多数经验丰富的 ReactJs 开发人员所知，状态是暂时的，因为每次刷新页面时它都会被清除，我们绝对可以'用户每次刷新都不需要登录。

快进到现在，我已经获得了一些在 React 中构建全栈应用程序的经验，研究了更有经验的开发人员的身份验证方法并在其他两个应用程序中复制了该过程，我想提供一个指导关于我目前如何处理它。有些人可能认为这不是最好的方法，但我现在已经采用它作为我的方法，并且我愿意学习其他开发人员使用的其他方法。

第一步

您已将电子邮件和密码（假设您使用基本电子邮件和密码身份验证）提交到后端以启动身份验证过程。我不会谈论后端如何处理身份验证，因为本文是关于如何仅在前端处理身份验证。我将跳到您在 HTTP 响应中收到令牌的部分。下面是一个简单登录表单组件的代码示例，该组件将电子邮件和密码提交到服务器并在响应中接收令牌和用户信息。现在为了简单起见，我的表单值是通过状态来管理的，对于生产应用程序来说，使用像 formik 这样强大的库会更好。

import axios from 'axios'
import { useState } from "react"

export default function LoginForm() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")

    const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo
        } catch (error) {
            throw error
        }
    }

    return(
        <form onSubmit={handleSubmit}>
            <div>
                <input name="email" onChange={(e) => setEmail(e.target.value)}/>
                <input name="password" onChange={(e) => setPassword(e.target.value)}/>
            </div>
            <div>
                <button type="submit">
                    Login
                </button>
            </div>
        </form>
    )
}

第二步

包装整个应用程序，或仅包装需要访问身份验证上下文提供程序中的身份验证状态的部分。这通常在根 App.jsx 文件中完成。如果您不知道 context API 是什么，请随时查看 Reactjs 文档。下面的示例显示了创建的 AuthContext 提供程序组件。然后将其导入到 App.jsx 中，并用于包装 App 组件中返回的 RouterProvider，从而使身份验证状态可以从应用程序中的任何位置访问。

import { createContext } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {

    return(
        <AuthContext.Provider>
            {children}
        </AuthContext.Provider>
    )
}

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import AuthProvider from "./AuthContext";

const router = createBrowserRouter([
    // your routes here
])

function App() {
    return(
        <AuthProvider>
            <RouterProvider router={router} />
        </AuthProvider>
    )
}

export default App

第三步

在身份验证上下文中，您必须初始化两个状态变量“isLoggedIn”和“authenticatedUser”。第一个状态是布尔类型，最初设置为“false”，然后在确认登录后更新为“true”。第二个状态变量用于存储登录用户的信息，例如姓名、电子邮件等。这些状态变量必须包含在上下文组件中返回的提供程序的值中，以便可以在整个应用程序中访问它们以进行条件渲染.

import { createContext, useState } from "react";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

第四步

Nanostores 是一个用于管理 Javascript 应用程序状态的包。该包提供了一个简单的 API，用于管理跨多个组件的状态值，只需在单独的文件中初始化它并将其导入到您想要使用状态或更新状态的任何组件中即可。但是，为了存储在第一步中的 HTTP 响应中收到的身份验证令牌，您将使用 nanostores/persistent。该包通过将状态存储在 localStorage 中来保留您的状态，这样当您刷新页面时它就不会被清除。 @nanostores/react 是针对 Nanostore 的 React 特定集成，它使 useStore 钩子可用于从 Nanostore 状态中提取值。

所以现在你可以继续：

• 安装以下软件包：nanostores、@nanostores/persistent 和 @nanostores/react。

• 在名为 user.atom.js 或您选择的任何名称的单独文件中，使用 nanostores/persistent 初始化“authToken”存储和“user”存储。

• 将它们导入到您的登录表单组件文件中，并使用登录响应中收到的令牌和用户数据更新状态。
  

npm i nanostores @nanostores/persistent @nanostores/react

import { persistentMap } from '@nanostores/persistent'

export const authToken = persistentMap('token', null)

export const user = persistentMap('user', null)

import { authToken, user } from './user.atom'

 const handleSubmit = async() => {
        try {
            const response = await axios.post("/api/auth/login", { email, password })
            if (response?.status !== 200) {
                throw new Error("Failed login")
            }
            const token = response?.data?.token
            const userInfo = response?.data?.userInfo

            authToken.set(token)
            user.set(userInfo)
        } catch (error) {
            throw error
        }
    }

第五步

现在，在包装应用程序的身份验证上下文中，您必须确保令牌和用户状态保持更新并在整个应用程序中可用。要实现这一目标，您必须：

• 导入‘authToken’和‘user’存储。

• Initialie a useEffect hook, inside of the hook, create a ‘checkLogin()’ function which will check whether the token is present in the ‘authToken’ store, if it is, run a function to check whether it’s expired. Based on your results from checking, you either redirect the user to the login page to get authenticated OR… set the ‘isLoggedIn’ state to true. Now to make sure the login state is tracked more frequently, this hook can be set to run every time the current path changes, this way, a user can get kicked out or redirected to the login page if their token expires while interacting with the app.

• Initialize another useEffect hook which will contain a function for fetching the user information from the backend using the token in the authToken store every time the app is loaded or refreshed. If you receive a successful response, set the ‘isLoggedIn’ state to true and update the ‘authenticatedUser’ state and the ‘user’ store with the user info received in the response.

Below is the updated AuthProvider component file.

import { createContext, useState } from "react";
import { authToken, user } from './user.atom';
import { useStore } from "@nanostores/react";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";

export const AuthContext = createContext(null)

export default function AuthProvider({children}) {
    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [authenticatedUser, setAuthenticatedUser] = useState(null)
    const token = useStore(authToken)
    const navigate = useNavigate()
    const { pathname } = useLocation()

    function isTokenExpired() {
        // verify token expiration and return true or false
    }

    // Hook to check if user is logged in 
    useEffect(() => {
        async function checkLogin () {
            if (token) {

              const expiredToken = isTokenExpired(token);

              if (expiredToken) {
                // clear out expired token and user from store and navigate to login page
                authToken.set(null)
                user.set(null)
                setIsLoggedIn(false);
                navigate("/login");
                return;
              }
            }
        };

        checkLogin()
    }, [pathname])

    // Hook to fetch current user info and update state
    useEffect(() => {
        async function fetchUser() {
            const response = await axios.get("/api/auth/user", {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })

            if(response?.status !== 200) {
                throw new Error("Failed to fetch user data")
            }

            setAuthenticatedUser(response?.data)
            setIsLoggedIn(true)
        }

        fetchUser()
    }, [])

    const values = {
        isLoggedIn,
        authenticatedUser,
        setAuthenticatedUser
    }

    return(
        <AuthContext.Provider value={values}>
            {children}
        </AuthContext.Provider>
    )
}

CONCLUSION

Now these two useEffect hooks created in step five are responsible for keeping your entire app’s auth state managed. Every time you do a refresh, they run to check your token in local storage, retrieve the most current user data straight from the backend and update your ‘isLoggedIn’ and ‘authenticatedUser’ state. You can use the states within any component by importing the ‘AuthContext’ and the ‘useContext’ hook from react and calling them within your component to access the values and use them for some conditional rendering.

import { useContext } from "react";
import { AuthContext } from "./AuthContext";

export default function MyLoggedInComponent() {

    const { isLoggedIn, authenticatedUser } = useContext(AuthContext)

    return(
        <>
        {
            isLoggedIn ? 
            <p>Welcome {authenticatedUser?.name}</p>
            :
            <button>Login</button>
        }
        </>
    )
}

Remember on logout, you have to clear the ‘authToken’ and ‘user’ store by setting them to null. You also need to set ‘isLoggedIn’ to false and ‘authenticatedUser’ to null.

Thanks for reading!

以上是使用 Nanostores 和 Context API 在 React 应用程序中处理身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！