使用上下文 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

我创建了自定义钩子。