title: Logout when token expired only when page is refreshed? Why?
body: <p>i am finding difficult to understand if when token is expired and logout action is performed, this last action is only executed when the page is refreshed. Although when token expire the 401 code is thrown it still make the protected route visible and only with a refresh it logs out and goes to login.. Is it supposed to be like this or should not be happening and i am missing something?</p>
  <p>Here's the code in front</p>
  <pre><code>import React, { useEffect } from 'react';
  import { Route, Redirect } from 'react-router-dom';
  import {useDispatch} from 'react-redux'
  import { logoutUser } from '../redux/ActionCreators';
  import { baseUrl } from '../shared/baseUrl'
  
  export const PrivateRoute = ({ component: Component, ...rest }) =&gt; {
  
      const dispatch = useDispatch()    
      
      useEffect(() =&gt; {
          // send jwt to API to see if it's valid
          let token = localStorage.getItem(&quot;token&quot;);
          if (token) {
              fetch(baseUrl + &quot;protected&quot;, {
                  method: &quot;POST&quot;,
                  headers: {
                      'Accept': 'application/json',
                      'Content-Type': 'application/json'
                  },
                  body: JSON.stringify({ token })
              })
                  .then((res) =&gt; {
                      return res.json()
                  })
                  .then((json) =&gt; {
                      if (json.success) {
                      }
                  })
                  .catch((err) =&gt; {
                      dispatch(logoutUser())
                  })
          } else {
              dispatch(logoutUser())
          }        
              
          }, [])
          
          
      return (&lt;Route {...rest} render={props =&gt; (
          localStorage.getItem('token')
              ? &lt;Component {...props} /&gt;
              : &lt;Redirect to={{ pathname: '/users/login', state: { from: props.location } }} /&gt;
      )} /&gt;)
  }
  </code></pre>
  <p>and the api called</p>
  <pre><code>protectedRouter.route('/')
      .options(cors.corsWithOptions, (req, res) =&gt; { res.sendStatus(200) })
      .get(cors.cors, authenticate.verifyUser, authenticate.verifyAdmin, async (req, res, next) =&gt; {
          res.statusCode = 403
          res.end('Operation not supported')
      })
      .post(cors.corsWithOptions,  async (req, res, next) =&gt; {
          const token = req.body.token
          
          if (token) {
           try {
            return jwt.verify(token, process.env.secretKey);
           } catch (err) {
            return null;
           }
          }
          return null;
  }) 
  </code></pre>