web-dev-qa-db-fra.com

Comment puis-je vérifier l'expiration du jeton et la déconnexion de l'utilisateur?

L'utilisateur peut se déconnecter lui-même lorsqu'il clique sur le bouton de déconnexion, mais si le jeton est expiré, il ne peut pas se déconnecter car, dans mon application, le jeton est utilisé à la fois côté serveur et côté frontal. Lorsque l'utilisateur clique sur le bouton de déconnexion, le jeton du serveur et du navigateur est effacé si le jeton est valide. Il est possible que lorsque l'utilisateur ne se déconnecte pas et que son jeton expire mais ne soit pas effacé dans le navigateur. Pour remédier à cette situation, comment puis-je vérifier l'expiration du jeton à chaque visite de l'utilisateur dans mon application? Si le jeton a expiré, effacez-le du navigateur? 

J'ai essayé dans Saga qui regarde en arrière-plan chaque fois que l'utilisateur actualise sa page ou passe à une autre page. Je ne pense pas que ce soit un moyen efficace. Je pense que le middleware entre en jeu.

function* loadInitialActions() {
  var dateNow = new Date();
  console.log(jwtDecode(token).exp < dateNow.getTime() - jwtDecode(token).iat);
  const token =
    JSON.parse(localStorage.getItem("user")) &&
    JSON.parse(localStorage.getItem("user"))["token"];
  if (
    token &&
    jwtDecode(token).exp < dateNow.getTime() - jwtDecode(token).iat
  ) {
    yield put(LOGOUT_SUCCESS);
  }
}

function* initialize() {
  const watcher = yield fork(loadInitialActions);
  yield take([INITIALIZE_ERROR, INITIALIZE_SUCCESS]);
  yield cancel(watcher);
}

function* rootSaga() {
  console.log("rootSaga");
  yield takeLatest(INITIALIZE, initialize);
}

Ma question est donc la suivante: comment utiliser la logique d’expiration du jeton et de déconnecter l’utilisateur si le jeton a expiré depuis le middleware?

javascriptreactjsreduxjwtredux-saga
9
Serenity

À mon avis, le middleware sera la meilleure option.

Vous pouvez faire quelque chose comme ça 

const checkTokenExpirationMiddleware = store => next => action => {
  const token =
    JSON.parse(localStorage.getItem("user")) &&
    JSON.parse(localStorage.getItem("user"))["token"];
  if (jwtDecode(token).exp < Date.now() / 1000) {
    next(action);
    localStorage.clear();
  }
  next(action);
};

Vous devez ensuite l'envelopper dans applyMiddleware

22
Tushant

Vous devez envelopper le composant principal avec un HOC. Le HOC validera le jeton et, si OK, autorisera l'affichage du composant. Si le jeton n'est pas valide, la page de connexion est redirigée. 

const authChecker = (Component) => {
  return class extends React.Component {
    state = {
      show: false;
    }

    componentWillReceiveProps(nextProps) {
      if (nextProps.children !== this.props.children) {
        this.checkAuth();
      }
    }

    componentDidMount() {
      this.checkAuth();
    }

    checkAuth() {
      Api.checkAuth()
      .then(result => {
        if (result.success) {
          this.setState({ show: true });
        } else {
          // logout since token expired
          API.logout();
        }
      });
    }

    render() {
      return this.state.show && <Component {...this.props} />
    }
  }
}

export default authChecker(Main);
2
vijayst

this.serverResponse.expires_inest le délai d'expiration en secondes.

var tokenexpiration: Date = new Date();
tokenexpiration.setSeconds(new Date().getSeconds() + parseInt(this.serverResponse.expires_in))
console.log(tokenexpiration);

que vous pouvez enregistrer dans localStorage:

localStorage.setItem('expirationdate',tokenexpiration)

et avec une condition simple, vous pouvez vérifier à tout moment si le jeton a expiré.

0
jonathana