🔐 Angular Auth Strategies – Best Practices für moderne Authentifizierung

Sichere Apps brauchen mehr als nur einen Login-Screen.
Hier zeige ich dir, wie du moderne Authentifizierung in Angular skalierbar & sicher implementierst.

🧱 1. Auth-Flow verstehen

Typischer Flow:

1. User → Login-Formular
2. Backend → JWT Token
3. Client speichert Token (z. B. im sessionStorage)
4. Jede Anfrage → Authorization: Bearer <token>

⚙️ 2. AuthService erstellen

@Injectable({ providedIn: 'root' })
export class AuthService {
  login(credentials: LoginDto) {
    return this.http.post<TokenResponse>('/api/login', credentials).pipe(
      tap(res => sessionStorage.setItem('token', res.token))
    );
  }

  get token() {
    return sessionStorage.getItem('token');
  }
}

🚨 3. AuthGuard + RoleGuard

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(private auth: AuthService) {}

  canActivate(): boolean {
    return !!this.auth.token;
  }
}

export function hasRole(expected: string) {
  return (route: ActivatedRouteSnapshot) => {
    const roles = getDecodedToken()?.roles;
    return roles?.includes(expected);
  };
}

🔐 4. Interceptor für Token

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const token = sessionStorage.getItem('token');
    if (token) {
      req = req.clone({
        setHeaders: { Authorization: `Bearer ${token}` }
      });
    }
    return next.handle(req);
  }
}

📦 5. OpenID Connect mit Auth0 / Keycloak

• Angular OAuth2 OIDC (https://github.com/manfredsteyer/angular-oauth2-oidc)
• Single Sign-On (SSO)
• Rollen & Scopes direkt vom Provider

✅ Fazit

Moderne Angular-Apps brauchen durchdachte Auth-Strategien.
Mit Guards, Interceptor und OIDC baust du ein sicheres Auth-Fundament. 🔐

📍 Nächster Beitrag:
📦 Angular Modulstruktur – Wie du große Apps übersichtlich hältst