NgRx et state management Angular : état, formulaires et sécurité

Résultats attendus

À la fin du jour 3, vous serez capable de :

• Choisir une stratégie de gestion d’état adaptée à votre contexte (Signals, RxJS, NgRx).
• Concevoir des formulaires complexes, robustes et orientés UX.
• Mettre en place une authentification JWT sécurisée côté Angular + Spring Boot.

Gains business & techniques

Impact sur vos projets

• Réduction de la dette technique liée au “state bricolé partout”.
• Moins de bugs fonctionnels sur les formulaires (validation cohérente, claire).
• Sécurité renforcée sans complexifier inutilement le code.

Scénario simple

State local avec Signals (Angular moderne)

Idéal pour une feature isolée (catalogue, panier, écran spécifique) : lisible, local, facile à tester.

// Store local de panier basé sur Signals
@Injectable({ providedIn: 'root' })
export class CartStore {
  readonly items = signal<Product[]>([]);

  readonly total = computed(
    () => this.items().reduce((acc, p) => acc + p.price, 0)
  );

  add(product: Product) {
    this.items.update(items => [...items, product]);
  }

  clear() {
    this.items.set([]);
  }
}

Cas applicatif large

NgRx / Store global pour les gros projets

Pour les applications avec beaucoup d’écrans, de rôles et de règles métier, un Store global reste pertinent.

// Exemple d'action NgRx
export const addItemToCart = createAction(
  '[Cart] Add Item',
  props<{ product: Product }>()
);

// Exemple de reducer
const reducer = createReducer(
  initialState,
  on(addItemToCart, (state, { product }) => ({
    ...state,
    items: [...state.items, product]
  }))
);

Structure

Formulaire de commande (formulaire imbriqué)

this.orderForm = this.fb.group({
  customer: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  confirmEmail: ['', Validators.required],
  address: this.fb.group({
    street: ['', Validators.required],
    city: ['', Validators.required],
    zip: ['', [Validators.required, Validators.pattern(/^\d{5}$/)]]
  }),
  acceptTerms: [false, Validators.requiredTrue]
}, { validators: emailsMatch }); // validator croisé posé sur le groupe

Validation avancée

Validation croisée & logique dynamique

import { AbstractControl, ValidationErrors } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

// Validator croisé (ex: confirmation d'email) — à poser sur le FormGroup
export function emailsMatch(group: AbstractControl): ValidationErrors | null {
  const email = group.get('email')?.value;
  const confirm = group.get('confirmEmail')?.value;
  return email && confirm && email !== confirm ? { emailsMismatch: true } : null;
}

// Écoute des changements (désabonnement automatique à la destruction du composant)
this.orderForm.valueChanges
  .pipe(takeUntilDestroyed(this.destroyRef))
  .subscribe(value => {
    // adapter dynamiquement les options de livraison, par ex.
  });

HTTP

Injection du JWT via un HttpInterceptor

import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';

// Intercepteur fonctionnel (Angular 15+, recommandé avec provideHttpClient)
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (!token) return next(req);
  const cloned = req.clone({
    setHeaders: { Authorization: `Bearer ${token}` }
  });
  return next(cloned);
};

// app.config.ts
// provideHttpClient(withInterceptors([authInterceptor]))

Routes

Protection des routes avec un Guard

import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';

// Guard fonctionnel (l'interface CanActivate est dépréciée depuis Angular 15.2)
export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn() ? true : inject(Router).createUrlTree(['/login']);
};

// app.routes.ts
// { path: 'orders', canActivate: [authGuard], loadComponent: ... }

Login

Endpoint d’authentification

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    private final AuthService service;

    public AuthController(AuthService service) { // sans constructeur, le champ final ne compile pas
        this.service = service;
    }

    @PostMapping("/login")
    public ResponseEntity<TokenResponse> login(@Valid @RequestBody LoginRequest req) {
        return ResponseEntity.ok(service.authenticate(req));
    }
}

Bonnes pratiques

Points de vigilance côté backend

• Limiter la durée de vie des tokens (access token court, refresh token dédié).
• Ne jamais mettre d’information sensible en clair dans le JWT.
• Protéger les endpoints d’admin par rôle et non uniquement par présence du token.