Flutter Getx Authentifizierung & Autorisierung

┬Ě

3 min read

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.