reactjs - 更新状态/上下文以重定向到受保护的路由反应

Question

我是新手，正在尝试从子组件更新组件的状态/上下文。

从下面的 AuthProvider() 我可以访问整个应用程序的用户状态。

如果用户为空，我会看到一个身份验证页面。在这里，我可以登录并调用loginUser()在服务器上登录用户并返回刷新和访问令牌以及用户名......将令牌存储在本地存储中并返回用户。这是那个功能...

auth-provider.js

export function handleUserResponse(user) {

  window.localStorage.setItem(localStorageKey, user.refresh_token)
  return user

}

function login({email, password}) {

    return client('/login', {email, password}).then(handleUserResponse)
//the client() function accepts an endpoint and user login info. 
}

我正在尝试从登录页面调用的登录函数更新 AuthProvider.js 中的状态，以便在收到令牌后重定向到受保护的页面。我需要将 设置user为新的更新用户。我是新手，知道这是一种常见的情况，但如果有人在此之前遇到过这种情况，我将非常感谢任何帮助。

到目前为止...我只能访问用户变量，而不能从登录页面更改它。

AuthProvider.js

const AuthContext = React.createContext();
  
export const getUser = () => auth.getToken().then((user) => ({ username:user}));
export const loginUser = (data) => auth.login(data).then((user) => ({ username:user }));


function AuthProvider({ children }) {

  const [state, setState] = React.useState({
    status: "pending",
    error: null,
    user: null,
    token: null,
  });


  React.useEffect(() => {
    getUser().then(
      (user) => setState({ status: "success", error: null, user }),
      (error) => setState({ status: "error", error, user: null })
    );
  }, []);


  return (
    <AuthContext.Provider value={state}>
      {state.status === "pending" ? (
        "Loading..."
      ) : state.status === "error" ? (
        <div>
          Oh no
          <div>
            <pre>{state.error.message}</pre>
          </div>
        </div>
      ) : (
        children
      )}
    </AuthContext.Provider>
  );
}
export default { AuthProvider, AuthContext };

Home.js -- 呈现经过身份验证或未经身份验证的应用程序版本

import useAuthState from '../UseAuthState'

function Home() {
  const { user } = useAuthState();

  return user.username ? <AuthenticatedApp /> : <UnauthenticatedApp />;

}
export default Home;

UseAuthState.js——返回状态数据

import React from 'react';
import AuthContext from './AuthProvider'

function useAuthState() {

  const state = React.useContext(AuthContext.AuthContext);
  const isPending = state.status === "pending";
  const isError = state.status === "error";
  const isSuccess = state.status === "success";
  const isAuthenticated = state.user && isSuccess;
  return {
    ...state,
    isPending,
    isError,
    isSuccess,
    isAuthenticated,
  };
}
export default useAuthState;

标签： reactjsauthenticationreact-state-management