Flutter Getx Authentifizierung & Autorisierung

Bei der Programmierung von Apps mit Flutter, kommt es häufig vor, dass wir neben der Authentifizierung des Users auch Zugriff auf bezahlte Premiuminhalte innerhalb der App anbieten möchten. Hierfür benötigen wir eine Autorisierung des eingeloggten (authentifizierten) Users. Getx bietet uns eine komfortable Möglichkeit die Authentifizierung und Autorisierung zu implementieren.

Authentifizierung und Autorisierung durch Route Guards

Um dem User nur Zugang zu den Bereichen unserer App zu geben, für die er authentifiziert bzw. autorisiert ist, können wir Route Guards verwenden. Diese leiten den User beim Seitenwechsel nur dann weiter, wenn er hierfür die nötige Berechtigung besitzt. Liegt keine Berechtigung vor, so wird der User durch einen Redirect zurück zur vorherigen Seite geleitet. Für diese Umleitung sorgt ein sogenannter Route Guard, der vor der Weiterleitung zur nächsten Seite prüft, ob die nötigen Berechtigungen vorliegen, oder nicht. Den Route Guard können wir uns als Türsteher für die jeweiligen Seiten vorstellen. Genau wie wir im echten Leben entschieden können, vor welcher Tür ein Türsteher stehen soll, können wir einzelnen Seiten einen, mehrere Türsteher oder gar keinen Türsteher vorschalten.

Getx Routing

Um Route Guards verwenden zu können, verwenden wir das Routing von Getx. Mehr zum Getx Routing findest du hier. Statt der standardmäßigen MaterialApp, verwenden wir die GetMaterialApp() aus dem Getx Package, damit steht uns das Getx Routing zur Verfügung. Als erstes legen wir wir unsere Routes an. Die GetMaterialApp Klasse gibt uns den getPages Parameter, der wir ein Array mit unseren Routes übergeben können. Für jede Route legen wir eine eigene GetPage an. Der GetPage() übergeben wir einen Namen für die Route und die Seite, zu der weitergeleitet werden soll. Als dritten Parameter können wir Middlewares für die jeweilige Weiterleitung hinterlegen. In unserem Fall wollen wir unsere Route Guards genau an dieser Stelle hinterlegen.

Route Guards Middleware

Um einen Route Guard als Middleware zu der Seite hinzuzufügen, müssen wir uns diesen zunächst anlegen. Dafür legen wir eine neue Klasse an, die die Klasse GetMiddleware mit extends beerbt. Die GetMiddleware Klasse bietet uns verschiedene Lifecycle-Funktionen an, die wir überschreiben können. Wir wollen direkt in dem Moment, in dem zur nächsten Seite weitergeleitet werden soll eingreifen und auf Berechtigung des Users prüfen. Hierfür überschreiben wir die redirect() Funktion. Wir prüfen zunächst auf Vorliegen der Berechtigung, ist dies der Fall geben wir null zurück, also ändern die Route nicht. Ist der User nicht berechtigt, geben wir eine geänderte Route über RouteSettings() mit dem Namen der gewünschen Seite zurück.

Mehrere Route Guards

Wir können mehrere Route Guards hinterlegen und auch die Reihenfolge der Prüfung festlegen. Hierfür übergeben wir GetPage() einfach mehrere Middlewares in das Array. Um eine Reihenfolge festzulegen können wir unseren Route Guards eine Priority übergeben, die der entsprechenden Variable der Superklasse GetMiddleware einen Integerwert zuweist.

Authentifizierung und Autorisierung leicht gemacht

Dank der Middlewares in Getx können wir auf einfache Weise Berechtigungs- und Zugriffskonzepte für unsere App erstellen. Durch die Verwendung von mehreren Route Guards haben wir die Möglichkeit feingranulare Berechtigungen für einzelne Abschnitte unserer App festzulegen.