Utilisation de cookies de session dans React

Question

J'ai une question concernant les cookies de session dans React.

Actuellement voici comment j'authentifie un utilisateur:

export function loginUser({ email, password }) { 
    return function(dispatch) { 
     axios.post(`${API_URL}/users/authenticate`, { email, password }, { withCredentials: true }) 
      .then((response) => { 
       if (response.data.result_status == "success") { 
        localStorage.setItem("token", JSON.stringify(response.data.user)) 
         dispatch({ type: AUTHENTICATE_USER }); 
         browserHistory.push("/home"); 
        }) 
       } 
      }) 
      .catch(() => { 
       dispatch(authError('Incorrect Login Info')); 
      }); 
    } 
} 

J'envoyer le email et password à une URL. Si le response.data.result_status == "success", puis je définis les informations d'utilisateur (comme leur nom et adresse e-mail) à un jeton localStorage et j'appelle AUTHENTICATE_USER qui définit un autre élément localStorage à true.

Depuis que j'utilise localStorage, les données persistent lorsque je recharge. Et tant que le localStorage authentifié n'est pas défini sur null, je reste sur le système. Cependant, maintenant nous voulons rester sur le système aussi longtemps que la session du cookie n'est pas expirée. Actuellement, je reste sur le système basé sur le jeton que j'ai défini pour le stockage local, pas le cookie.

Le backend n'utilise pas JWT, juste un cookie. Y at-il un moyen pour moi de vérifier si le cookie est toujours en session avec axios?

Answer 1

Le seul qui sait que la session du cookie est encore active est l'API, c'est donc de ce côté que vous devrez vérifier si la session du cookie est toujours active. Je suppose que vous recevrez un 401 Unauthenticated lorsque vous n'êtes plus connecté afin que vous puissiez vérifier le code d'état de la réponse à chaque demande et supprimer l'élément localStorage lorsque la session a expiré.

Je vous propose allez utiliser une réponse interceptor from Axios pour vérifier le code d'état:

axios.interceptors.response.use(function (response) { 
    // Do something with response data 
    return response; 
    }, function (error) { 
    // Do something with response error 
    if (error.status === 401) { 
     // DELETE YOUR AUTHENTICATE_USER item from localStorage 
    } 
    return Promise.reject(error); 
});