JWT côté angular

A lire

https://www.techiediaries.com/angular/jwt-authentication-angular-9-example/

Création d’un service

Création de méthodes pour s’authentifier auprès du backend

• login
• register
• logout

Stockage du token dans le local storage

localStorage.setItem('access_token', token);

Transmission du token à chaque requête

Le paquet angular-jwt prend en charge automatiquement la transmission du jeton :

npm install @auth0/angular-jwt --save

Dans AppModule :

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    JwtModule.forRoot({
      config: {
        tokenGetter: function  tokenGetter() {
          return     localStorage.getItem('access_token');},
        whitelistedDomains: [environment.server],
        blacklistedRoutes: [`${environment.apiUrl}/sign-in`]
      }
    })
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ajout de rôles

• Décodage du jeton pour connaître le rôle

npm install jwt-decode --save

• Utilisation du décodeur dans le service

import * as jwt_decode from 'jwt-decode';
...

private static userFromToken(token: string): User {
    const decodedToken = jwt_decode(token);

    const name = decodedToken.sub;
    const roles = decodedToken.auth.map(authority => {
      return {label: authority.authority};
    });

    return {id: 0, name: name, role: roles[0]};
  }

• Ajout de guards pour protéger les routes, par exemple admin.guard.ts :

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
import {JwtService} from "../jwt/jwt.service";

@Injectable()
export class AdminGuard implements CanActivate {

  constructor(private router: Router, private jwtService: JwtService) {
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if (!this.jwtService.isLogged()) {
      return false;
    } else if (this.jwtService.getRole() == 'ADMIN') {
      return true;
    }

    return false;
  }
}

• Utilisation des guards dans app-routing.module.ts :

  const routes: Routes = [
  { path: '', redirectTo: '/post', pathMatch: 'full' },
  {
    path: 'post',
    component: PostListComponent,
    canActivate: [UserGuard]
  },
  {
    path: 'admin',
    component: UserListComponent,
    canActivate: [AdminGuard]
  }
  ];
  

Exemple

https://github.com/jtobelem-simplon/blog-front https://github.com/jtobelem-simplon/blog-api

@author Josselin Tobelem