javascript - Hur autentiserar man användare med Context API?

Jag har problem med att logga in på min applikation med hjälp av Context API. När jag kör applikationer utan att ha någon token i min localStorage i variabeln session får jag många fel som nedan:

Uncaught TypeError: Cannot read properties of null (reading 'name')

Jag tror att detta problem finns eftersom mitt currentAccount från ApplicationContext är null.

instrumentbräda/index.tsx

  const { currentAccount } = useContext(ApplicationContext);

  return (
      <span>{currentAccount.name}</span>
  );

På routes.login inloggningssidan får jag också dessa undantag även om detta fel bara borde vara på routes.dashboard :/ Att uppdatera sidan eller rensa localStorage hjälper inte. Jag har också en oändlig loop över checkLogin i ApplicationContextProvider :(

login/index.tsx

  const { setCurrentAccount } = useContext(ApplicationContext);

  const onFinish = async (email: string; password: string) => {
      try {
        const response = await axios.post("/auth/login", {
            email: email,
            password: password
        });

        const token = response["token"];
        const account = response["account"];
        if (token && account) {
          localStorage.setItem("session", token);
          setCurrentAccount(account);

          history.push(routes.dashboard)
        }
      } catch (error) {

      }
  };

App.tsx

  return (
    <div className="App">
      <Switch>
        <ApplicationContextProvider>
          <Route path={route.login} component={Login} />
          <Main>
            <Route path={route.dashboard} component={Dashboard} />
          </Main>
        </ApplicationContextProvider>
      </Switch>
    </div>
  );

ApplicationContextProvider.tsx

export type AccountContext = {
  currentAccount?: Account;
  setCurrentAccount: (user: Account) => void;
  checkLogin: () => void;
};
export const ApplicationContext = React.createContext<AccountContext>(null);

interface ProviderProps {
  children: React.ReactNode
}

export const ApplicationContextProvider = ({ children }: ProviderProps) => {
  const [currentAccount, setCurrentAccount] = useState<Account>(null);

  useEffect(() => {
    checkLogin();
  }, [currentAccount]);

  const checkLogin = async () => {
    const token = localStorage.getItem("session");
    if (token) {
        const token = localStorage.getItem("session");
        const decode = jwt(token);
    
        const query = {
          id: decode["id"]
        }

        const response: Account = await api.get("/auth/account", query);
        setCurrentAccount(response);
    } else {
        setCurrentAccount(null);
    }
  };

  const stateValues = {
    currentAccount,
    setCurrentAccount,
    checkLogin
  };

  return (
    <ApplicationContext.Provider value={stateValues}>
      {children}
    </ApplicationContext.Provider>
  );

Kan någon berätta för mig vad som är fel med min logik för autentisering av användare till applikationen?

Tack för all hjälp!

Svar #1

Jag vet redan vad som pågår, kanske det kommer att vara användbart för någon i framtiden.

Jag måste lägga till två viktiga saker. För den första useEffect()-funktionen behöver den ha en tom beroendelista som nedan:

  useEffect(() => {
    checkLogin();
  }, [ ]);

och för det andra måste jag också lägga till ett tillstånd för att lagra laddning som nedan:

const [loading, setLoading] = useState(false)

och ställa in rätt värden när jag har fått data från API och så vidare