使用上下文 API 反應身份驗證

Question

我在使用 react api 上下文進行身份驗證時遇到問題。 當我在表單中輸入登錄憑據時，使用 rest api 我得到一個訪問令牌，當我得到它時，它將它設置為我的 localStorage 中的值“會話”並重定向到我的routing數組中的routes.home使用Main.tsx保存私有路由。 但是當我重定向到這個home時，我面臨着來自Header.tsx的許多空指針，因為我從useContext(AppContext)獲取的account是 null。 有時我還在useEffect的App.tsx中循環了邏輯。

在 App.tsx 中，我試圖從當前用戶的 rest api 獲取整個 object 並設置為提供者。

有人可以告訴我我做錯了什么以及如何正確設置數據以提供通過useContext使用這些數據嗎？

這是我的代碼：

登錄/index.tsx

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

        const token = response["token"];
        if (token) {
          localStorage.setItem("session", token);
          history.push(routes.home)
        }
      } catch (error) {
       
      }
  };

Header.tsx

export const Header = () => {
  const { account } = useContext(AppContext);

  return (
    //here is using `account` to display eq. `account.name`
  );
}

主要.tsx

export const Main = ({ account, children }) => {
  return (
    <AppContextProvider account={account}>
       //div's, styles, components, etc.
   </AppContextProvider>

應用程序.tsx

export default function App() {

  const [accountData, setAccountData] = useState(null);
  const history = useHistory();

  useEffect(() => {
    if (localStorage.getItem("session")) {
      const token = localStorage.getItem("session");
      const decode = jwt(token);
  
      const query = {
        id: decode["id"]
      }
  
      const accountResponse: any = async () => {
        const response = await api.get("/auth/account", query);
        setAccountData(response);

        history.push(routes.dashboard);
      }
  
      accountResponse();
    } else {
      history.push(publicRoutes.login);
    }
  })

  return (
    <div className="App">
      <Switch>
        {publicRouting.map(({ path, component }, i) => (
          <Route key={i} path={path} component={component} />
        ))}
        <Main account={accountData}>
          {routing.map(({ path, component }, i) => (
            <Route key={i} path={path} component={component} />
          ))}
        </Main>
      </Switch>
    </div>
  );
}

AppContextProvider.tsx

export const AppContextProvider: FC<AppContextProviderProps> = ({ account, children }) => {
    return (
        <AppContext.Provider
            value={{ 
                account: account
            }}
        >
            { children}
        </AppContext.Provider>
    )
}

謝謝你的幫助！

Answer 1

你可以在這里看到我的代碼： https://github.com/muhammadyunusuz/React-Login-Exemple

我創建了自定義鈎子。