What to change in the Logout.js file so that a redirect to the registration page after I click the logout button?

Question

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>   
      );
    }
  }

If it’s just the logout button not sending you to the root page, why not use history.push(“/“) like you did to get to the home page? — nrayburn-tech, Apr 10 '20 at 20:23

twharmon · Accepted Answer · 2020-04-10T20:45:10.167

Your problem is that the Home component isn't getting updated / rendered after you remove items from localStorage.

One approach would be to reload the page when Logout is clicked:

class Logout extends React.Component {
  deleteToken = () => {
    localStorage.removeItem('myToken');
    window.location.href = '/';
  };

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

}

score 0 · Answer 2 · answered Apr 10 '20 at 20:41

I think the problem is that you handle the localStorage API in asynchronous way. You can use this way -> Is any solution to do localstorage setItem in asynchronous way in javascript?

or you can use localStorage.removeItem('value'); with help of a Promise, then when the opration done, redirect to the authorization page.

good luck

What to change in the Logout.js file so that a redirect to the registration page after I click the logout button?

2 Answers2