Garmaine Staff asked 2 years ago

I implement authorization and registration in the application.

What I have already done: If the user successfully validates the form, the form is sent to the local server and returns a response, this response contains a token, which I save in localStorage and with the help of: history.push ("/ home"); I am redirecting to the home page. In addition, I wrote in the Homecomponent:

const Home = () => {
    const token = localStorage.getItem("myToken")
    return (
        <>
            {!token && <Redirect to="/" />}
            <Header/>
            <h1>Home page</h1>
        </>
    )
}

So that if there is no recorded token in localStorage, there is a redirect to the authorization page, that is, you can’t go to the home page if you unregistered user.

Now I made the Logout component, which when clicked, will remove the token from localStorage and as in the component Home, it is written:

const token = localStorage.getItem("myToken");
{!token && <Redirect to="/" />}

And after clicking Logout button should have been to redirect to the registration page, but for me this only happens after the page is refreshed. What should I change in the Logout.js file so that when I click on the button Logout a redirect to the registration page?

Logout.js:

class Logout extends React.Component {

   deleteToken = () => {
      localStorage.removeItem('myToken');
   };

   render(){
      return (
         <button onClick={this.deleteToken}>Logout</button>   
      );
    }
  }