Redirect works even though it shouldn't render

Question

I was doing an authorization for my react app, and I've made a redirect from /auth route if user is logged in. After logout, the redirect still works, even thought the isLoggedIn value from Api is changed for sure(checked with console.log to be sure)

I dont really know why, so I only tried to change some of Api methods, the isLoggedIn was a get attribute of an object before, now it's function.

function Auth(){
    return (
        <div>
            <Header theme="light"/>

            <Switch>
                {Api.Auth.isLoggedIn() && <Redirect to={routes.home}/>}
                <Route path={routes.login} component={Login}/>
                <Route path={routes.register} component={Register}/>
            </Switch>
        </div>
    );
}

Api:

isLoggedIn() {
    console.log(this._token, !!this._token); // test, returns false everytime, but redirect works...
    return !!this._token;
  },
logout(){
    this._token = null;
    this._axiosSetToken('');
    try {
      window.localStorage.removeItem('token');
    } catch (e) {
      console.error(e);
    }
  }

I have one more thing that are using the same login check(displaying or now profile link with avatar in header, but there it works fine and login button appears.

The thing work okay after F5(page reload), and it doesn't matter if I reloaded the page before logout, or after - it will work.

Can you create a codepen for that? And you should move your redirect out of the switch. — Domino987, Aug 12 '19 at 11:58
How do you ensure that your Auth component re-renders, thereby re-verifying a user `isLoggedIn` after `API.Auth.logout` is called? Are you currently using Mobx, Redux, or React Context? It sounds like you're doing so with your button component. — Khauri, Aug 12 '19 at 11:59
@Khauri I'm using Redux to login, but logging out is basically cleaning tokens and redirecting to home. And condition is based on the token so it should work... — MrJunior, Aug 12 '19 at 12:01
@Antonio @Domino987 I've moved redirect out of Switch(and it's `{Api.Auth.isLoggedIn() && }` not since it was like that before. Still the same — MrJunior, Aug 12 '19 at 12:03
@Antonio and why btw, i thought it's better to prevent anyone going to /auth route at all — MrJunior, Aug 12 '19 at 12:04
@Antonio if user is on `/auth` route - i redirect him if he's logged in, so I don't need to worry about that in all the `/auth/*` routes everytime. Why it's bad? — MrJunior, Aug 12 '19 at 12:11
I see what you mean, but I think the way you tried is wrong. Please check this. https://stackoverflow.com/questions/43164554/how-to-implement-authenticated-routes-in-react-router-4#43171515 — Diamond, Aug 12 '19 at 12:14
@Antonio I was reading docs so I know it, and I've used PrivateRoute before, right now I adjusted it(added props like authed, redirect_to) and it still the same, exactly the same... works on reload. I think it's Redirect component issue, since I see that when component render after logout the authed = true, but Redirect still appears — MrJunior, Aug 12 '19 at 12:22
And the question is: why it works after page reload and doesn't otherwise. — MrJunior, Aug 12 '19 at 12:44

score 0 · Accepted Answer · answered Aug 17 '19 at 07:11

0

As someone has said to me, usually you should reload page after logout, as told in question - works after reload.

answered Aug 17 '19 at 07:11

MrJunior

13
4

Redirect works even though it shouldn't render

1 Answers1