Menguruskan Keadaan Auth dalam tindak balas menggunakan API useContext

Coretan kod ini ialah semua yang anda perlukan untuk mengurus keadaan pengesahan pada aplikasi tindak balas anda menggunakan API Konteks untuk mengurus keadaan pengguna merentas aplikasi.

tidak lagi membebel, mari kita selaminya.

Import dan Definisi Jenis

import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useEffect } from "react";
import { useLocalStorage } from "../utils/useLocalStorage";

type SignInForm = { email: string; password: string; };
type User = { id: number; email: string; };
type AuthState = User & { exp: number };
type UserContextType = {
  user: User | null;
  setUser: Dispatch<setstateaction null>>;
  signOut: () => Promise<string undefined>;
  signIn: (signInForm: SignInForm) => Promise<string undefined>;
};
</string></string></setstateaction>

Kami bermula dengan mengimport cangkuk React yang diperlukan dan cangkuk useLocalStorage tersuai. Kemudian, kami menentukan jenis TypeScript untuk sistem pengesahan kami, termasuk SignInForm, User, AuthState dan UserContextType.

Mencipta Konteks dan Cangkuk Tersuai

const AuthDataContext = createContext<usercontexttype undefined>(undefined);

export const useAuth = (): UserContextType => {
  const context = useContext(AuthDataContext);
  if (!context) {
    throw new Error("useAuth must be used within a UserDataProvider");
  }
  return context;
};
</usercontexttype>

Di sini, kami mencipta AuthDataContext dan cangkuk useAuth tersuai. Cangkuk ini memastikan bahawa kami menggunakan konteks dalam pembekal dan menyediakan cara yang mudah untuk mengakses keadaan pengesahan kami.

Komponen AuthProvider

export const AuthProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useLocalStorage<authstate null>("user", null);

  // ... (other functions)

  return (
    <authdatacontext.provider value="{{" user setuser signin signout>
      {children}
    </authdatacontext.provider>
  );
};
</authstate>

Komponen AuthProvider ialah teras sistem pengesahan kami. Ia menggunakan cangkuk useLocalStorage untuk mengekalkan keadaan pengguna dan memberikan nilai konteks kepada anak-anaknya.

Semakan Tamat Tempoh JWT

const isJwtExpired = (unixTime: number) => {
  const currentTime = Math.floor(Date.now() / 1000);
  const timeRemaining = unixTime - currentTime;
  if (timeRemaining 



<p>Fungsi ini menyemak sama ada JWT telah tamat tempoh dan log baki masa jika masih sah.</p>

<h2>
  
  
  Fungsi Log Keluar
</h2>



<pre class="brush:php;toolbar:false">const signOut = async () => {
  const res = await fetch("http://localhost:8080/auth/signout", { method: "POST" });
  setUser(null);
  if (!res.ok) {
    console.log("Error signing out");
    return (await res.text()) || "Something went wrong";
  }
};

Fungsi log Keluar membuat permintaan POST ke titik akhir log keluar dan mengosongkan keadaan pengguna.

Fungsi Log Masuk

const signIn = async (signInForm: SignInForm) => {
  const res = await fetch("http://localhost:8080/auth/signin", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(signInForm),
  });
  if (!res.ok) {
    return (await res.text()) || "Something went wrong";
  }
  const data = (await res.json()) as { user: User; exp: number };
  if (data) {
    setUser({ ...data.user, exp: data.exp });
  }
};

Fungsi log masuk menghantar bukti kelayakan pengguna ke titik akhir log masuk dan mengemas kini keadaan pengguna dengan data respons.

useEffect untuk Semakan Tamat Tempoh JWT

useEffect(() => {
  if (!user) return;
  if (isJwtExpired(user.exp)) signOut();
}, [user]);

Kesan ini berjalan apabila keadaan pengguna berubah, menyemak sama ada JWT telah tamat tempoh dan log keluar jika perlu.

Berikut ialah contoh pelaksanaan cangkuk useLocalStorage btw

import { useState, useEffect, Dispatch, SetStateAction } from "react";

export function useLocalStorage<t>(
  key: string,
  initialValue: T
): [T, Dispatch<setstateaction>>] {
  const [storedValue, setStoredValue] = useState<t>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue: Dispatch<setstateaction>> = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    const handleStorageChange = (event: StorageEvent) => {
      if (event.key === key) {
        setStoredValue(JSON.parse(event.newValue || "null"));
      }
    };

    window.addEventListener("storage", handleStorageChange);
    return () => window.removeEventListener("storage", handleStorageChange);
  }, [key]);

  return [storedValue, setValue];
}
</setstateaction></t></setstateaction></t>

dan anda sudah selesai? perah lemon peasy yang mudah.. pastikan anda mengubah suai logik pengambilan untuk struktur api anda sendiri jika perlu.

Atas ialah kandungan terperinci Menguruskan Keadaan Auth dalam tindak balas menggunakan API useContext. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!