web-dev-qa-db-fra.com

Gestion du jeton expiré depuis Api dans Angular 4

J'ai besoin d'aide pour gérer le jeton expiré dans mon application angular. Mon api a le temps expiré mais mon problème est quand j'ai oublié de me déconnecter de mon angular application , après un certain temps, je peux toujours accéder à la page d'accueil mais sans données. Y a-t-il quelque chose que je peux faire à ce sujet? Y a-t-il des bibliothèques qui peuvent gérer cela? Ou y a-t-il quelque chose que je pourrais installer? Mieux, si rien ne sera installé. Voici mon code d'authentification ci-dessous? Puis-je ajouter tout ce qui peut gérer l'expiration et je ne pourrai pas accéder à la page d'accueil si elle expire.

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

Je pense qu'il y a deux solutions avec lesquelles vous pouvez jouer.

Le premier vous pouvez simplement appeler votre fonction de déconnexion lorsque le navigateur se ferme comme:

  @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

De cette façon, toujours lorsque le navigateur se ferme, votre this.auth.logout(); sera appelée automatiquement.

Deuxièmement vous pouvez installer une bibliothèque comme angular2-jwt cela peut vous aider à détecter si le jeton a expiré =

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č

Vous pouvez le faire en utilisant des intercepteurs http.

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

Voici la solution complète

6
Amirhosein Al