NANOSTORE と CONTEXT API を使用した React アプリでの認証の処理-jsチュートリアル-php.cn

HANDLING AUTH IN REACT APPS USING NANOSTORES AND CONTEXT API

ReactJs を使用してフルスタック Web アプリを構築した初心者の頃、フロントエンドで認証を処理する方法について混乱していることに気づきました。つまり、バックエンドからアクセストークンを受け取った後、次に何をすべきでしょうか?ログイン状態をどのように保存しますか?

ほとんどの初心者は、「ああ、トークンを状態に保存すればいいだけだ」と考えるでしょう。しかし、それが最良の解決策ではなく、まったく解決策でもないことがすぐにわかりました。なぜなら、ほとんどの経験豊富な ReactJs 開発者が知っているように、状態はページを更新するたびにクリアされるため一時的なものであり、絶対に解決できないからです。ユーザーが更新するたびにログインする必要はありません。

React でフルスタックアプリを構築し、認証に対するより経験豊富な開発者のアプローチを研究し、他の 2 つのアプリケーションでプロセスを複製する経験を少し積んだので、ガイドを示したいと思います。私が今どのように対処しているかについて。それが最良の方法だと思わない人もいるかもしれませんが、私は今のところそれを自分の方法として採用しており、他の開発者が使用している他の方法を学ぶことに前向きです。

ステップ 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 ファイルで行われます。コンテキスト 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

認証コンテキストでは、2 つの状態変数「isLoggedIn」と「authenticatedUser」を初期化する必要があります。最初の状態はブール型で、最初は「false」に設定され、ログインが確認されると「true」に更新されます。 2 番目の状態変数は、名前、電子メールなどのログインユーザーの情報を保存するために使用されます。これらの状態変数は、条件付きレンダリングのためにアプリケーション全体でアクセスできるように、コンテキストコンポーネントで返されるプロバイダーの値に含める必要があります。 .

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 応答で受信した認証トークンを保存するために、nanostore/persistent を使用します。このパッケージは、localStorage に状態を保存することで状態を保持します。これにより、ページを更新しても状態が消去されなくなります。 @nanostores/react は、ナノストアの反応固有の統合であり、ナノストアの状態から値を抽出するための useStore フックを利用できるようにします。

それでは、次に進んでください:

次のパッケージをインストールします: 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
        }
    }

ログイン後にコピー

ステップ5

次に、アプリをラップする認証コンテキストで、トークンとユーザーの状態が常に更新され、アプリ全体で利用できるようにする必要があります。これを達成するには、次のことを行う必要があります:

「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 中国語 Web サイトの他の関連記事を参照してください。