为什么在 AuthContext.Provider 中登录后不设置数据

Question

If I set in context provider sample data, I see this data in all nested components. But I need login to the account and in response, I get data about user for set in the global context and use in all components.

context/AuthProvider.tsx

const AuthContext = createContext<any>({});

export const AuthProvider = ({ children }: any) => {
  const [auth, setAuth] = useState({});

  return (
    <>
      <AuthContext.Provider value={{ auth, setAuth }}>{children}</AuthContext.Provider>
    </>
  );
};

hooks/useAuth.ts

const useAuth = () => {
  return useContext(AuthContext);
};

export default useAuth;

index.tsx

import { AuthProvider } from './context/AuthProvider';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </React.StrictMode>
);

I have App with BrowserRouter logic for not logged users redirect to login. If logged, so go to the Homepage. components/App/App.tsx

const AppContainer: FC<any> = () => {
  const { token } = useToken();

  return (
    <>
      <div className={'wrapper'}>
        <BrowserRouter>
          {!token ? <LoggedOutRoutes /> : <LoggedInRoutes />}
        </BrowserRouter>
      </div>
    </>
  );
};

const LoggedOutRoutes: FC<any> = () => (
  <Switch>
    <Route path="/" exact={true}>
      <Login />
    </Route>
    <Redirect from={'*'} to={'/'} />
  </Switch>
);

const LoggedInRoutes: FC = () => (
  <Switch>
    <Route path="/" exact={true} component={Homepage} />
  </Switch>
);

In login component sending request with data and I getting access_token and user data. Now I need set user data in useAuth hook.

const Login: FC<any> = () => {
  const { setToken } = useToken();
  const { setAuth } = useAuth()

  const handleSubmit = async (event: any) => {
    event.preventDefault();

    const res = await API.login({
      login,
      password
    });

    const { access_token, user } = res;

    setToken(access_token);
    setAuth(user);

    window.location.reload();
  };

  return (
    <form onClick={handleSubmit}>
      // ...There i have submit form, not interesting
    </form>
  );
};

After reloading the page, my page will be Homepage where I won't use my context data from the provider but I have an empty object, why?

Answer 1

The problem is window.location.reload . Any SPA will not retain data after a page refresh by default.

Now if you still want to persist that information even after page reload, i recommend to persist that info in localStorage. So something like this should work.

export const AuthProvider = ({ children }: any) => {
  const [auth, setAuth] = useState(localStorage.get('some-key') || {});

  const updateAuth = (auth) => {
    localStorage.set('some-key', auth);
    setAuth(auth);
  }

  return (
    <>
      <AuthContext.Provider value={{ auth, updateAuth }}>{children}</AuthContext.Provider>
    </>
  );
};