Handhabung von Abgelaufenen Tokens Aus der Api-im Winkel 4

Ich benötige Hilfe bei der Handhabung von abgelaufenen Tokens in meinem angular Anwendung. Meine api ist die abgelaufene Zeit, aber mein problem ist, wenn ich vergessen habe zu melden aus meinem Winkel-Anwendung, nach einiger Zeit, ich kann immer noch Zugriff auf die homepage, aber ohne Daten. Gibt es etwas, was ich tun kann? Gibt es Bibliotheken, die verarbeiten kann? oder gibt es etwas, was ich installieren könnte? Besser, wenn ich nichts installiert werden. Hier ist mein authentication code unten? Kann ich nichts hinzufügen, kann den Ablauf und die ich nicht in der Lage, den Zugriff auf die homepage, wenn es abläuft.

auth.service.ts

 export class AuthService {
  private loggedIn = false;

  constructor(private httpClient: HttpClient) {
  }

  signinUser(email: string, password: string) {  
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json');

    return this.httpClient
    .post(
      'http://sample.com/login', 
       JSON.stringify({ email, password }), 
       { headers: headers }
    )
    .map(
        (response: any) => {
          localStorage.setItem('auth_token', response.token);
          this.loggedIn = true;
          return response;
        });
   }

    isLoggedIn() {
      if (localStorage.getItem('auth_token')) {
        return this.loggedIn = true;
      }
    }

   logout() {
     localStorage.removeItem('auth_token');
     this.loggedIn = false;
    }
}

authguard.ts

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (this.authService.isLoggedIn()) {
      //logged in so return true
      return true;
    }

    else {
      //not logged in so redirect to login page with the return url
      this.router.navigate(['signin'])
      return false;
      }
  }
}

Sie können erzwingen, die app zu löschen login-status beim verlassen der app.
Aber ich denke, das ist nicht, wie professionelle web-app funktioniert, richtig? Sie können immer noch Zugriff auf Ihr Konto, nachdem Sie den browser schließen.
Dies hängt von Ihrem app-Authentifizierung Strategie. Für mich, es ist merkwürdig, dass die app lässt sich immer noch angemeldet, aber API ist nicht mehr erreichbar.
was passiert bei der Abmeldung?
Meinst du, wenn ich auf den logout-button? Es Abmeldungen die app und ich werden nicht in der Lage, den Zugriff auf die homepage

InformationsquelleAutor Joseph | 2017-09-11

4

Ich denke, es gibt zwei Lösungen, die Sie mit spielen können.

Die erste Sie können einfach rufen Sie logout-Funktion, wenn der browser immer geschlossen wie:
```
  @HostListener('window:unload', ['$event'])
  handleUnload(event) {
    this.auth.logout();
  }
```
https://developer.mozilla.org/de/docs/Web/Events/unload

ODER
```
 @HostListener('window:beforeunload', ['$event'])
      public handleBeforeUnload(event) {
        this.auth.logout();
      }
```
https://developer.mozilla.org/de/docs/Web/Events/beforeunload

Diese Weise immer, wenn der browser immer geschlossen this.auth.logout(); wird automatisch aufgerufen.

Zweiten können Sie die Bibliothek installieren wie angular2-jwt es kann Ihnen helfen, zu erkennen wenn der token abgelaufen ist
```
jwtHelper: JwtHelper = new JwtHelper();

useJwtHelper() {
  var token = localStorage.getItem('token');

  console.log(
    this.jwtHelper.decodeToken(token),
    this.jwtHelper.getTokenExpirationDate(token),
    this.jwtHelper.isTokenExpired(token)
  );
}
```
Was empfehlen Sie, wenn ich den browser schließen, nenne ich Abmelden? ODER Wenn ich vergessen habe auszuloggen und ich öffne den browser wieder, ich kann immer noch Zugriff auf die homepage und die Daten in es. Nach einiger Zeit, wird das token abläuft, aber mein problem ist, ich bin immer noch auf meiner homepage, haben aber keine Daten, ich sollte die Weiterleitung auf die login-Seite
Ich denke, dass Sie eine bessere Nutzung der Bibliothek, wie angular2-jwt diese Weise können Sie behandeln Ihren Fall in der richtigen Weise, es hat alle Funktionen, die Sie benötigen.
Unterstützt eckig 4? Ich habe einen Fehler Installation
Ja, es ist unterstützt angular 4 ich gerade installiert, in der app und keine Probleme. Stellen Sie sicher, Sie installieren angular2-jwt nicht angular-jwt
Können Sie mir helfen, mein edit code?

InformationsquelleAutor Kuncevič

Können Sie dies tun, indem Sie http-Abfangjäger.

intercept(req: HttpRequest<any>, next: HttpHandler) {
  if(!localStorage.getItem('token'))
    return next.handle(req);

  //set headers
  req = req.clone({
    setHeaders: {
      'token': localStorage.getItem('token')
    }
  })

  return next.handle(req).do((event: HttpEvent<any>) => {
    if(event instanceof HttpResponse){
      //if the token is valid
    }
  }, (err: any) => {
    //if the token has expired.
    if(err instanceof HttpErrorResponse){
      if(err.status === 401){
        //this is where you can do anything like navigating
        this.router.navigateByUrl('/login');
      }
    }
  });
}

Hier die vollständige Lösung

InformationsquelleAutor Amirhosein Al

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.