webentwicklung-frage-antwort-db.com.de

Wie überprüfe ich, ob der Benutzer Token abläuft und abmeldet?

Der Benutzer kann sich selbst abmelden, wenn er auf die Schaltfläche zum Abmelden klickt. Wenn das Token jedoch abgelaufen ist, kann er sich nicht abmelden, da das Token in meiner Anwendung sowohl auf der Serverseite als auch im Frontend verwendet wird. Wenn der Benutzer auf die Schaltfläche zum Abmelden klickt, wird das Token von Server und Browser gelöscht, wenn das Token gültig ist. Es besteht die Möglichkeit, dass der Benutzer sich nicht abmeldet und sein Token abläuft, aber nicht im Browser gelöscht wird. Wie kann ich zur Behebung dieser Situation bei jedem Besuch des Benutzers in meiner App nach dem Ablaufen des Token suchen? Wenn das Token abgelaufen ist, das Token aus dem Browser löschen? 

Ich habe es in einer Saga versucht, die im Hintergrund jedes Mal überwacht, wenn der Benutzer die Seite aktualisiert oder zu einer anderen Seite wechselt. Ich denke nicht, dass dies ein effizienter Weg ist. Ich denke, Middleware kommt ins Spiel.

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);
}

Meine Frage ist also, wie verwende ich die Token-Ablauflogik und den Logout-Benutzer, wenn das Token von der Middleware abgelaufen ist?

9
Serenity

Aus meiner Sicht wird Middleware die beste Option sein.

Sie können so etwas tun 

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);
};

Sie müssen es dann in applyMiddleware einpacken.

22
Tushant

Sie müssen die Hauptkomponente mit einem HOC umschließen. Das HOC validiert das Token und wenn dies OK ist, kann die Komponente angezeigt werden. Wenn das Token ungültig ist, wird zur Anmeldeseite weitergeleitet. 

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_inist die Ablaufzeit in Sekunden.

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

als Sie es in localStorage speichern können:

localStorage.setItem('expirationdate',tokenexpiration)

bei einfacher Bedingung können Sie überprüfen, wann das Token abgelaufen ist.

0
jonathana