2
votes

Comment créer une déconnexion lorsque le jeton expire

Quelqu'un pourrait-il m'aider à résoudre ce problème? Je ne sais pas comment implémenter une session expirée dans mon application react.

J'ai des données json avec expires_in: 86400 ce que je dois faire pour implémenter cela dans mon application, une fois expirées pour déconnecter l'utilisateur .

J'utilise react.JS et redux.

Action:

export const signin = obj => {
  return dispatch => {
    let data = {
      method: "post",
      url: "/oauth/token",
      data: {
        grant_type: "password",
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET,
        username: obj.email,
        password: obj.password
      }
    };
    return API(data)
      .then(res => {
        window.localStorage.setItem("access_token", res.data.access_token);
        console.log('uuuuuuuuuu', res)
        dispatch({
          type: AUTH.LOGGED_IN,
          payload: {
            access_token: res.data.access_token,
            expired_in: res.data.expires_in
          }
        });
      })
      .catch(err => {
        throw err;
      });
  };
};

reactjs redux

2 commentaires

vous pouvez utiliser setInterval pour planifier une action avec l'intervalle comme valeur dans expires_in . Une fois l'intervalle atteint, vous pouvez effacer l'intervalle et exécuter votre action de déconnexion. Faites-moi savoir si vous avez besoin d'un exemple pour cela. Je suppose que expires_in est la valeur de temps relative pour laquelle le jeton est valide et non le temps absolu.

Veuillez me montrer un exemple :)

3 Réponses :

0
votes

À partir de votre code, j'ai trouvé. vous avez utilisé window.localStorage.setItem ("access_token", res.data.access_token); Mais vous avez réellement besoin d'un cookie et définissez le délai d'expiration de la réponse. Ensuite, vous devez vérifier que le cookie existe dans le composant parent. s'il n'existe pas (expiré), vous pouvez rediriger vers la page de connexion.

Pour la déconnexion forcée, vous pouvez simplement faire expirer le cookie. ;)

9 commentaires

Je comprends cela, avez-vous un exemple de code?

Si vous stockez des jetons jwt dans localStorage, il n'est pas nécessaire d'utiliser des cookies.

Utilisez le code suivant. cookies.set ('access_token', res.data.access_token, {chemin: '/', maxAge: res.data.expires_in}); au lieu de window.localStorage.setItem ("access_token", res.data.access_token); Assurez-vous que vous avez importé des cookies du package 'universal-cookie'.

Vous devez avoir besoin d'un cookie si vous voulez que access_token expire dans 86400 sec. Parce que vous ne pouvez pas définir l'heure d'expiration sur localStorage.

J'ai ceci maintenant imgur.com/a/ej9GkHY Alors, ce que je dois faire ensuite. Je veux dire, si la page expirée du jeton sera automatiquement redirigée ou si je dois faire quelque chose de plus? De plus, je dois supprimer certains éléments du stockage local

Il ne redirigera pas automatiquement. vous devez archiver le constructeur parent ou globalement. comme ce constructeur (props) {super (props); laissez jwt = cookies.get ('access_token') || ''; if (jwt === '') {props.history.push ('/ pages / login'); // rediriger vers la page de connexion}}

Bien sûr, vous pouvez le faire avec localStorage. Une fois la réponse arrivée, vous stockez l'heure actuelle + l'heure d'expiration. Cela vous indique quand le jeton expire dans localStorage, que vous pouvez vérifier par rapport à l'heure actuelle chaque fois que vous souhaitez utiliser le jeton.

@Prabusamvel pourriez-vous s'il vous plaît m'expliquer pourquoi j'ai besoin d'utiliser dans le constructeur ici? Ou je peux mettre ce code à un autre endroit?

Bien sûr, vous pouvez placer le code globalement quelque part. Dans ce cas, pour un seul composant, j'ai utilisé le constructeur.

0
votes

Vous ne devez pas stocker le temps restant à expirer, mais l’heure actuelle + le temps restant. Sinon, vous ne pouvez pas savoir quand cela s'est produit.

2 commentaires

Avez-vous un exemple de ce que je dois faire? :)

Même endroit où vous stockez le access_token dans localStorage, stockez simplement expires_in + new Date (). GetTime (). Idem pour la charge utile à redux. Ensuite, vous pouvez soit vérifier redux par rapport à new Date (). GetTime () chaque fois que vous souhaitez utiliser le jeton, ou utiliser un setTimeout pour planifier une actualisation avant son expiration. De plus, lorsque votre application est chargée, vous devez la remettre en redux (et le délai d'expiration si vous l'avez utilisée) à partir de ce qui est stocké dans localStorage.

1
votes

Vous pouvez simplement y parvenir en utilisant la fonction setTimeout pour déclencher votre fonction de déconnexion. Le code ci-dessous part du principe que expires_in est le temps relatif et non le temps absolu.

function logOutFunction() {
   window.localStorage.removeItem("access_token");
   // your redux dispatch and probably a redirection logic to go to a proper UX page
}

et votre logoutFunction ressemblera à quelque chose comme ceci:

    window.localStorage.setItem("access_token", res.data.access_token);
    setTimeout(logoutFunction, response.data.expires_in)
    console.log('uuuuuuuuuu', res)
    dispatch({
      type: AUTH.LOGGED_IN,
      payload: {
        access_token: res.data.access_token,
        expired_in: res.data.expires_in
      }
    });

J'ai dit par erreur dans les commentaires d'utiliser setInterval . Je suppose que ce sera une exécution unique, setTimeout est préférable d'utiliser.

0 commentaires