Wie man Authentifizierung und Autorisierung in einer Angular-Anwendung implementiert

Die Implementierung von Authentifizierung und Autorisierung in modernen Webanwendungen ist eine der zentralen Herausforderungen, die Entwickler bewältigen müssen. Eine gängige Methode zur Umsetzung dieser Funktionalitäten basiert auf JSON Web Tokens (JWT), die zur sicheren Identifikation und Autorisierung von Benutzern verwendet werden. In dieser Anleitung wird beschrieben, wie man eine Authentifizierungs- und Autorisierungslogik in einer Angular-Anwendung aufbaut, die mit einem externen Authentifizierungsanbieter arbeitet.

In der Praxis wird der Authentifizierungsstatus in einer Service-Klasse wie AuthService verwaltet, die die zentrale Schnittstelle für alle Authentifizierungsoperationen darstellt. Dabei muss dieser Service sowohl die Anmeldung (Login), als auch das Abrufen des Tokens und das Abmelden (Logout) des Benutzers unterstützen. Eine abstrakte Klasse wird genutzt, um die Implementierung von Methoden wie authProvider, transformJwtToken und getCurrentUser zu erzwingen. Dies stellt sicher, dass jede Authentifizierungsimplementierung (z.B. für verschiedene Authentifizierungsanbieter) diese Methoden implementiert, ohne den Code der AuthService-Klasse selbst zu verändern.

Ein weiteres wichtiges Detail in der Implementierung ist die Art und Weise, wie Fehler gehandhabt werden. Bei der Anmeldung können verschiedene Fehler auftreten, sei es durch Netzwerkprobleme oder ungültige Benutzereingaben. In solchen Fällen muss der Fehler in einem konsistenten Format behandelt und den Benutzern verständlich angezeigt werden. Eine transformError Funktion wird verwendet, um Fehler zu standardisieren und sie als Observable zurückzugeben, sodass sie einfach in der Anwendung verarbeitet werden können.

Wenn ein Benutzer sich erfolgreich anmeldet, wird der Authentifizierungsstatus über den BehaviorSubject aktualisiert und der Benutzer wird auf die entsprechenden Daten zugreifen können. Die Authentifizierung erfolgt in mehreren Schritten: Zunächst wird der Token vom Authentifizierungsanbieter empfangen und mit einer transformJwtToken Methode in das IAuthStatus-Format überführt. Anschließend wird der Benutzer in der Anwendung angemeldet, und sein Profil über getCurrentUser abgerufen. Diese Prozesse werden durch RxJS-Operatoren wie map, tap, filter und flatMap orchestriert.

Ein weiterer Punkt, der für den Leser von Bedeutung ist, ist die korrekte Handhabung der Zustände und das Verständnis der Rolle von BehaviorSubject in dieser Architektur. Es ist wichtig zu wissen, dass der BehaviorSubject es ermöglicht, den Authentifizierungsstatus in Echtzeit zu verfolgen, wodurch Änderungen sofort an alle abonnierten Komponenten weitergegeben werden. Dies verbessert die Benutzererfahrung, da Benutzer in Echtzeit über ihre Anmeldestatus und deren Änderungen informiert werden können.

Zudem sollte beachtet werden, dass durch die Verwendung einer abstrakten Authentifizierungs-Servicelogik die Erweiterbarkeit und Wartbarkeit des Codes erheblich verbessert wird. Jede Änderung oder Erweiterung des Authentifizierungsmechanismus, wie z.B. das Hinzufügen eines neuen Authentifizierungsanbieters oder das Anpassen der JWT-Verarbeitung, erfordert keine Änderungen an der bestehenden Logik der Anwendung, sondern nur an den spezifischen Implementierungen der abstrakten Methoden.

Wie man NgRx mit API-Daten in einer Angular-Anwendung implementiert

Die Nutzung von NgRx zur Verwaltung des Anwendungszustands ist ein kraftvolles Werkzeug, das Entwicklern hilft, die Logik der Datenverarbeitung in Angular-Anwendungen zu strukturieren. Besonders wenn es darum geht, API-Daten zu verarbeiten und anzuzeigen, bietet NgRx eine saubere und skalierbare Lösung. Die grundlegende Idee von NgRx basiert auf der Verwendung von Actions, Reducers und Selectors, die zusammenarbeiten, um eine vorhersehbare Datenflusslogik zu gewährleisten. In diesem Kontext betrachten wir, wie man eine Wetterdatenanwendung mit NgRx umsetzt.

Ein zentraler Bestandteil der Implementierung ist der Umgang mit API-Aufrufen und deren sequentieller Verarbeitung. Wenn mehrere API-Anfragen gleichzeitig gemacht werden, ist es entscheidend, wie diese verarbeitet werden. Der Operator concatMap sorgt dafür, dass Anfragen nacheinander abgearbeitet werden, wobei die Darstellung der Ergebnisse erst nach Abschluss der vorherigen Aktion erfolgt. Im Gegensatz dazu sorgt der Operator switchMap dafür, dass nur die zuletzt empfangene Antwort angezeigt wird. Bei einer Wetteranwendung ist switchMap oft die bevorzugte Wahl, da in der Regel nur das zuletzt angeforderte Wetter angezeigt werden soll. Es ist jedoch wichtig, den richtigen RxJS-Operator je nach Anwendungsfall auszuwählen, um unnötige API-Aufrufe zu vermeiden und die Benutzererfahrung zu verbessern.

Sobald die API-Daten erfolgreich geladen wurden, müssen sie im Zustand der Anwendung gespeichert werden. NgRx bietet mit Reducers eine strukturierte Möglichkeit, den Zustand zu aktualisieren. Ein Reducer verarbeitet eine bestimmte Aktion und verändert den Zustand der Anwendung auf unveränderliche Weise. Dies sorgt dafür, dass der Zustand vorhersagbar bleibt und nicht direkt manipuliert wird, was wiederum die Wartbarkeit und Testbarkeit des Codes verbessert. Um dies zu erreichen, wird die weatherLoaded-Aktion genutzt, um die geladenen Wetterdaten in den Zustand zu überführen.

Ein konkretes Beispiel für einen Reducer, der die Wetterdaten speichert, könnte folgendermaßen aussehen:

typescript
Copy code
export interface State {
  current: ICurrentWeather;
}
export const initialState: State = {
  current: defaultWeather,
};
const searchReducer = createReducer(
  initialState,

  on(SearchActions.weatherLoaded, (state, action) => {

    return {
      ...state,
      current: action.current,
    };
  })
);

Hier wird der Zustand des Wetters in der current-Eigenschaft des States gespeichert. Der Reducer sorgt dafür, dass die Wetterdaten nur dann im Zustand aktualisiert werden, wenn die weatherLoaded-Aktion ausgelöst wird. Die Verwendung von NgRx reduziert so die Komplexität des Datenflusses und macht den Code leichter verständlich.

typescript
Copy code
export const selectCurrentWeather = createSelector(
  (state: State) => state.search.current,
  current => current
);

Dies ist eine saubere und effiziente Methode, um spezifische Daten aus dem Zustand zu extrahieren und in den Komponenten zu verwenden.

typescript
Copy code
ngRxBasedSearch(searchText: string, country?: string) {

  this.store.dispatch(SearchActions.search({ searchText, country }));

}

Die Integration von NgRx ist jedoch nicht nur eine Technik zur Verbesserung der Codequalität, sondern auch eine Methode zur Sicherstellung von Testbarkeit und Vorhersehbarkeit. Ein wichtiges Element der Qualitätssicherung ist das Schreiben von Unit-Tests für Reducer und Selector, um sicherzustellen, dass Änderungen am Zustand korrekt und ohne ungewollte Nebenwirkungen erfolgen. Hier ein Beispiel für einen Test eines Reducers:

typescript
Copy code
describe('Search Reducer', () => {
  describe('weatherLoaded', () => {
    it('should return current weather', () => {

      const action = SearchActions.weatherLoaded({ current: fakeWeather });

      const result = reducer(initialState, action);
      expect(result).toEqual({ current: fakeWeather });
    });
  });
});

Dieser Test überprüft, ob der Reducer das Wetter korrekt im Zustand speichert. Ebenso wird ein Test für den Selector geschrieben, um sicherzustellen, dass der Zustand korrekt abgerufen wird:

typescript
Copy code
describe('Search Selectors', () => {
  it('should selectCurrentWeather', () => {
    const expectedWeather = defaultWeather;
    expect(selectCurrentWeather({
      search: { current: defaultWeather }
    })).toEqual(expectedWeather);
  });
});

Ein weiteres Testelement ist das Mocken des Stores, um die Logik von Komponenten zu überprüfen. Hierbei wird sichergestellt, dass die current$-Eigenschaft im CurrentWeatherComponent korrekt funktioniert.