React.js check if user is logged in after redirect and display a popup-CodePudding

Hi i want to create little system of popup that if user isnt logged in while clicking on his collection he is redirected to the login page with a state (loggedIn) on which i want to base the popup displaying, and also delete the state after it execute the popup so it wont execute always on reloading the page. For now it "kinda" works but for example when im reloading the page on the url with ?logged=false it will always dislpay the popout and i wouldnt want that. Also now if someone will logout (so currentUser changes) it also redirecting to the ?logged=false path and displaying the popout which id rather to redirect to /login without the popout. Heres my code:

const location = useLocation();
const notify = () =>
    toast.error("You must be logged in to view your collection!", {
      position: "bottom-center",
      autoClose: 5000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });

useEffect(() => {
    const queryParams = new URLSearchParams(location.search);
    if (queryParams.has("logged")) {
      notify();
    }
  }, []);

return (
    <>
      {location.search ? (
        <ToastContainer
          position="bottom-center"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
      ) : (
        null
      )}
rest of the login form...

usercollection.js

return (
    <>
      {currentUser === null ? (
        <Redirect
          to={{
            pathname: "/login",
            state: { loggedIn: "false" },
            search: "?logged=false",
          }}
        />
      ) : (
        <>
rest of the collection code...

CodePudding user response：

Suppose you have some component that supports both login and non-login user.

  const CollectionPublic = () => {
    return "Public Collection Content"
  }

  const CollectionPrivate = () => {
    return "Private Collection Content"
  }

And then your route suppose to send the user to the right place.

  <Route path="/collection" render={props => 
    user ? <CollectionPublic /> : <CollectionPrivate />
  }/>

Now it's about how to create a user and send it to Route. There're various of ways, but suppose the user is built with a context.

  const UserContext = React.createContext({
    user: null,
    login: () => {}
  })

Once you provide this context to the rest of application, ex. in App.

  const App = () => {
    ...
    // logic about how to come up with user and login
    return (
      <UserContext.Provider value={{user, login}}>
        // all your routes or whatever
      </UserContext.Provider
    )
  }

If any component want to access the user info, you can

  const CollectionPublic = () => {
    const { login } = useContext(UserContext)
    const onClick = () => {
      // either redirect to login page or
      login()
    }
    return <button onClick={onClick}>content private</button>
  }

Just an idea. Normally any authentication built for react should come up with something similar.