Ce projet implémente l'autentification JWT sur Angular.
Le backend est géré par l'application dans le dépot suivant :
https://github.com/iliasse-e/spring-security
git clone https://github.com/iliasse-e/spring-security.git Lancer le backend :
mvn spring-boot:run Si nécessaire, créé de nouveau users dans la base.
Pour chaque requete HTTP, l'intercepteur vérifie si on possède un token (via le service AuthService), et l'ajoute au header (champs Authorization) de la requete.
export function authInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> { const auth = inject(AuthenticationService); const token = auth.token(); if (!token) { return next(req) } const headers = new HttpHeaders({ Authorization: "Bearer " + token }) const newReq = req.clone({ headers }) return next(newReq) }Simplement de mettre à jour un état (ex token) que l'on récupère le access-token à la suite du login.
Au lieu de sauvegarder l'état du token dans l'application, on peut le stocker dans le fichier du client, de façon à le récupérer même si la fenetre a été fermée.
const token = localStorage.getItem(ACCES_TOKEN);L'authentification n'implique pas la récupération du user, celle ci se fait en deux étapes.
this.#http.post(LOGIN_URL, body.toString(), { headers }) // requête pour login .pipe( tap((res: any) => localStorage.setItem(ACCES_TOKEN, res["access-token"])), // stock le token switchMap(() => this.#http.get<User>(PROFILE_URL)), // requête pour récupérer le user tap(user => this._user.set(user)) )On créé et appelle une méthode permettant de mettre à jour le access-token. Une fois que l'on intercepte une erreur 401, on appelle cette méthode :
// Si 401 et utilisateur authentifié if (error.status === 401 && authService.isAuthenticated()) { return authService.refreshToken().pipe( // On appelle le service pour refresh le token switchMap(() => { // Puis on met à jour le Bearer const newToken = localStorage.getItem(ACCESS_TOKEN); const newReq = req.clone({ setHeaders: { Authorization: `Bearer ${newToken}` }, withCredentials: true }); return next(newReq); }), catchError(refreshError => { authService.logout(); // Optionnel : déconnexion si le refresh échoue return throwError(() => refreshError); }) ); }Cette méthode permet de rafraichir le access-token via l'envoie du refresh-token présent dans les cookies. Le jeton d'accès se met à jour, et l'on peut de nouveau effectuer des nouvelles requêtes au serveur sans recevoir d'erreur 401.
Si le refresh-token est invalide (car dépassé), alors on .logout(), et redirige vers le formulaire de login.
git clone https://github.com/auth0/angular2-jwt.git