web-dev-qa-db-de.com

Behandlung von abgelaufenem Token von API in Angular 4

Ich benötige Hilfe beim Umgang mit abgelaufenem Token in meiner angular application. Meine API hat die abgelaufene Zeit, aber mein Problem ist, dass ich vergessen habe, mich von meiner angular application abzumelden Nach einiger Zeit kann ich immer noch auf die Homepage zugreifen, aber ohne Daten. Gibt es etwas, das ich dagegen tun kann? Gibt es Bibliotheken, die damit umgehen können? Oder gibt es etwas, das ich installieren könnte? Besser, wenn nichts installiert wird Kann ich irgendetwas hinzufügen, das das Ablaufen bewältigt, und ich kann nicht auf die Homepage zugreifen, wenn sie 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;
      }
  }
}
angulartokenaccess-tokenangular-http
9
Joseph

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

Als erstes können Sie einfach Ihre Abmeldefunktion aufrufen, wenn der Browser geschlossen wird:

  @HostListener('window:unload', ['$event'])
  handleUnload(event) {
    this.auth.logout();
  }

https://developer.mozilla.org/de/docs/Web/Events/unload

OR

 @HostListener('window:beforeunload', ['$event'])
      public handleBeforeUnload(event) {
        this.auth.logout();
      }

https://developer.mozilla.org/de/docs/Web/Events/beforeunload

Auf diese Weise wird beim Schließen des Browsers automatisch Ihre this.auth.logout(); aufgerufen.

Zweitens können Sie eine Bibliothek wie angle2-jwt installieren, um wenn das Token abgelaufen ist zu erkennen =

jwtHelper: JwtHelper = new JwtHelper();

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

  console.log(
    this.jwtHelper.decodeToken(token),
    this.jwtHelper.getTokenExpirationDate(token),
    this.jwtHelper.isTokenExpired(token)
  );
}
7
Kuncevič

Sie können dazu http-Interceptors verwenden.

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 ist die vollständige Lösung

6
Amirhosein Al