React - How to check if JWT is valid before sending a post request? : <p>another noob question. I'm logging in my user to the system using JWT authorization, getting the token and saving it in <code>localstorage</code> and then sending a post request that saves data (its a big form basically). Problem is, the sever is invalidating the token after a given time (20 minutes or so) and so, some of my post requests are returning <code>401 status</code>. How to verify (and if needed, show a login prompt) before sending the post request? I'm using <code>redux-form</code> to make my forms. </p>

<p>P.S: I know I'm supposed to use action creators and such, but I'm still a newbie, so not very good at those stuff. </p>

<p>here's my authentication: </p>

<pre><code>export function loginUser(creds) {

const data = querystring.stringify({_username: creds.username, _password: creds.password});

let config = {
    method: 'POST',
    headers: { 'Content-Type':'application/x-www-form-urlencoded' },
    body: data
};

return dispatch =&gt; {
    // We dispatch requestLogin to kickoff the call to the API
    dispatch(requestLogin(creds));

    return fetch(BASE_URL+'/login_check', config)
        .then(response =&gt;
            response.json().then(user =&gt; ({ user, response }))
        ).then(({ user, response }) =&gt;  {
            if (!response.ok) {
                // If there was a problem, we want to
                // dispatch the error condition
                dispatch(loginError(user.message));
                return Promise.reject(user)
            } else {
                // If login was successful, set the token in local storage
                localStorage.setItem('id_token', user.token);
                let token = localStorage.getItem('id_token')
                console.log(token);
                // Dispatch the success action
                dispatch(receiveLogin(user));
            }
        }).catch(err =&gt; console.log("Error: ", err))
    }
}
</code></pre>

<p>and here's the <code>POST</code> request (I'm getting the <code>values</code> object from <code>redux-form</code>)</p>

<pre><code>const token = localStorage.getItem('id_token');
const AuthStr = 'Bearer '.concat(token);

let headers ={
headers: { 'Content-Type':'application/json','Authorization' : AuthStr }
};

export default (async function showResults(values, dispatch) {
axios.post(BASE_URL + '/new', values, headers)
    .then(function (response) {
        console.log(values);
        console.log(response);
    })
    .catch(function (error) {
        console.log(token);
        console.log(values)
        console.log(error.response);
    });
});
</code></pre>

<p>P.P.S: if anyone has any suggestion for improving my code, feel free to comment.</p>
