Nanostore 및 Context API를 사용하여 React 앱에서 인증 처리

ReactJ로 풀 스택 웹 앱을 구축하는 초보 시절, 프론트엔드에서 인증을 처리하는 방법에 대해 혼란스러워했습니다. 즉, 백엔드에서 액세스 토큰을 받은 후 다음에 무엇을 해야 합니까? 로그인 상태를 어떻게 유지하나요?

대부분의 초보자는 "아, 그냥 토큰을 상태에 저장하세요"라고 가정합니다. 그러나 나는 이것이 최고의 솔루션이 아니었고 전혀 솔루션이 아니라는 것을 빨리 알게 되었습니다. 대부분의 숙련된 ReactJs 개발자가 알고 있듯이 상태는 페이지를 새로 고칠 때마다 지워지기 때문에 일시적이므로 우리는 확실히 할 수 있습니다. 새로고침할 때마다 사용자가 로그인할 필요는 없습니다.

리액션으로 풀 스택 앱을 구축하고 인증에 대한 경험이 더 많은 개발자의 접근 방식을 연구하고 다른 두 애플리케이션에서 프로세스를 복제하는 데 약간의 경험을 얻었으므로 가이드를 제공하고 싶습니다. 내가 현재 어떻게 처리하고 있는지. 어떤 사람들은 이것이 최선의 방법이라고 생각하지 않을 수도 있지만 나는 지금까지 그것을 내 방식으로 채택했으며 다른 개발자들이 사용하는 다른 방법을 배우는 데 열려 있습니다.

1단계

인증 프로세스를 시작하기 위해 이메일과 비밀번호(기본 이메일 및 비밀번호 인증을 사용한다고 가정)를 백엔드에 제출했습니다. 이 문서에서는 인증을 프런트엔드에서만 처리하는 방법에 대해 다루기 때문에 백엔드에서 인증을 처리하는 방법에 대해서는 언급하지 않겠습니다. 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>
    )
}

2단계

전체 애플리케이션을 래핑하거나 인증 컨텍스트 공급자의 인증 상태에 액세스해야 하는 부분만 래핑합니다. 이는 일반적으로 루트 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

3단계

인증 컨텍스트에서는 "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>
    )
}

4단계

Nanostores는 Javascript 앱의 상태를 관리하기 위한 패키지입니다. 패키지는 별도의 파일에서 간단히 초기화하고 상태를 사용하거나 업데이트하려는 구성 요소로 가져오는 방식으로 여러 구성 요소의 상태 값을 관리하기 위한 간단한 API를 제공합니다. 그러나 1단계의 HTTP 응답에서 수신된 인증 토큰을 저장하기 위해 nanostores/persist를 사용하게 됩니다. 이 패키지는 상태를 localStorage에 저장하여 상태를 유지하므로 페이지를 새로 고칠 때 지워지지 않습니다. @nanostores/react는 nanostore에 대한 특정 반응 통합으로, nanostore 상태에서 값을 추출하기 위한 useStore 후크를 사용할 수 있게 합니다.

이제 다음 작업을 수행할 수 있습니다.

• nanostores, @nanostores/percious 및 @nanostores/react 패키지를 설치합니다.

이를 로그인 양식 구성 요소 파일로 가져오고 로그인 응답에서 받은 토큰과 사용자 데이터로 상태를 업데이트하세요.

• 
  

5단계

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!

위 내용은 Nanostore 및 Context API를 사용하여 React 앱에서 인증 처리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!