MENGENDALIKAN AUTH DALAM APPS REACT MENGGUNAKAN NANOSTORE DAN API KONTEKS

Pada hari permulaan saya membina apl web tindanan penuh dengan ReactJs, saya mendapati diri saya keliru tentang cara mengendalikan pengesahan di bahagian hadapan. Maksud saya, apakah yang perlu anda lakukan seterusnya selepas menerima token akses anda dari bahagian belakang? Bagaimanakah anda mengekalkan keadaan log masuk?

Kebanyakan pemula akan menganggap "Oh, simpan sahaja token anda dalam keadaan". Tetapi saya dapati dengan cepat bahawa ia bukanlah penyelesaian terbaik, malah ia bukan penyelesaian sama sekali kerana, seperti yang diketahui oleh kebanyakan pembangun ReactJs yang berpengalaman, keadaan adalah sementara kerana ia akan dikosongkan setiap kali anda memuat semula halaman dan kami pasti boleh' t mempunyai pengguna log masuk setiap kali mereka memuat semula.

Maju Cepat sehingga sekarang saya telah memperoleh sedikit pengalaman dalam membina apl tindanan penuh dalam tindak balas, mengkaji pendekatan pembangun yang lebih berpengalaman untuk pengesahan dan mereplikasi proses dalam dua aplikasi lain, saya ingin memberikan panduan tentang cara saya mengendalikannya sekarang. Sesetengah orang mungkin tidak fikir ia adalah cara terbaik tetapi saya telah menggunakannya sebagai cara saya buat masa ini dan saya terbuka untuk mempelajari kaedah lain yang digunakan oleh pembangun lain.

LANGKAH SATU

Anda telah menyerahkan e-mel dan kata laluan anda (dengan andaian anda menggunakan pengesahan e-mel dan kata laluan asas) ke bahagian belakang untuk memulakan proses pengesahan. Saya tidak akan bercakap tentang cara auth dikendalikan di backend kerana artikel ini adalah tentang cara mengendalikan auth semata-mata di frontend. Saya akan melangkau ke bahagian di mana anda telah menerima token dalam respons HTTP. Di bawah ialah contoh kod komponen borang log masuk mudah yang menyerahkan e-mel dan kata laluan kepada pelayan dan menerima token dan maklumat pengguna dalam respons. Kini demi kesederhanaan, nilai borang saya diuruskan dengan keadaan, adalah lebih baik untuk menggunakan perpustakaan yang teguh seperti formik untuk apl pengeluaran.

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>
    )
}

LANGKAH KEDUA

Balut keseluruhan aplikasi anda, atau hanya bahagian yang memerlukan akses kepada keadaan pengesahan dalam pembekal konteks Pengesahan. Ini biasanya dilakukan dalam fail App.jsx root anda. Jika anda tidak tahu apa itu API konteks, sila semak dokumen Reactjs. Contoh di bawah menunjukkan komponen pembekal AuthContext yang dibuat. Ia kemudiannya diimport dalam App.jsx dan digunakan untuk membalut RouterProvider yang dikembalikan dalam komponen App, dengan itu menjadikan keadaan pengesahan boleh diakses dari mana-mana sahaja dalam aplikasi.

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

LANGKAH TIGA

Dalam konteks pengesahan, anda perlu memulakan dua pembolehubah keadaan, "isLoggedIn" dan "AuthenticatedUser". Keadaan pertama ialah jenis boolean yang pada mulanya akan ditetapkan kepada 'false' kemudian dikemas kini kepada 'true' setelah log masuk disahkan. Pembolehubah keadaan kedua digunakan untuk menyimpan maklumat pengguna yang dilog masuk seperti nama, e-mel, dll. Pembolehubah keadaan ini perlu disertakan dalam nilai untuk pembekal yang dikembalikan dalam komponen konteks supaya ia boleh diakses sepanjang aplikasi untuk pemaparan bersyarat .

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>
    )
}

LANGKAH EMPAT

Nanostores ialah pakej untuk mengurus keadaan dalam apl Javascript. Pakej ini menyediakan API mudah untuk mengurus nilai keadaan merentas berbilang komponen dengan hanya memulakannya dalam fail berasingan dan mengimportnya dalam mana-mana komponen yang anda mahu gunakan keadaan atau mengemas kininya. Tetapi, untuk tujuan menyimpan token pengesahan anda yang diterima dalam respons HTTP dalam langkah pertama, anda akan menggunakan kedai nano/persistent. Pakej ini mengekalkan keadaan anda dengan menyimpannya dalam localStorage, dengan cara itu ia tidak dikosongkan apabila anda memuat semula halaman. @nanostores/react ialah penyepaduan khusus bertindak balas untuk kedai nano, ia menyediakan cangkuk useStore untuk mengekstrak nilai daripada keadaan kedai nano.

Jadi sekarang anda boleh meneruskan dan:

• Pasang pakej berikut: kedai nano, @nanostores/persistent dan @nanostores/react.

• Dalam fail berasingan bernama user.atom.js atau apa sahaja yang anda pilih untuk menamakannya, mulakan kedai ‘authToken’ dan kedai ‘pengguna’ menggunakan kedai nano/persistent.

• Import mereka ke dalam fail komponen borang log masuk anda dan kemas kini keadaan dengan token dan data pengguna yang diterima dalam respons log masuk anda.
  

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
        }
    }

LANGKAH LIMA

Kini, dalam konteks pengesahan anda yang merangkumi apl anda, anda perlu memastikan bahawa token dan keadaan pengguna sentiasa dikemas kini dan tersedia di seluruh apl anda. Untuk mencapai ini, anda perlu:

• Import kedai ‘authToken’ dan ‘pengguna’.

• 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!

Atas ialah kandungan terperinci MENGENDALIKAN AUTH DALAM APPS REACT MENGGUNAKAN NANOSTORE DAN API KONTEKS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!