Pinia

Anmeldung mit Keycloak in Vue: Authorization Code mit PKCE

Die Web-App des Mitfahrlabors bekommt eine Anmeldung mit dem Schulkonto. Zuerst probiert das Paar in einem Spike aus, wie sich eine Single-Page-App bei Keycloak anmeldet. Der Artikel erklärt, warum eine App im Browser ein öffentlicher Client ohne Secret ist und wie der Authorization Code Flow mit PKCE verhindert, dass ein abgefangener Code nutzbar ist. Mit oidc-client-ts, einem Navigation Guard und dem Pinia-Store meldet sich die App an, schickt das Access Token an das Backend und reagiert auf abgelaufene Tokens. Getestet wird ohne Keycloak mit einer Attrappe.

Übungsaufgaben zu Refactoring mit Composables und Pinia: Mitfahrgesuche aufräumen

Die Mitfahrgesuche in der Web-App des Mitfahrlabors sollen aufgeräumt werden. In diesen Übungen findest Du Code Smells in einer Seite für Gesuche, ordnest Zustände Props, Composables und Stores zu und sagst voraus, was beim Zerlegen eines Stores passiert. Danach baust Du test-first einen Pinia-Store für Gesuche und schließt eine Seite „Meine Gesuche“ mit useLaden() an. Zum Schluss findest Du heraus, warum die Tests eines anderen Paars nach dem Umzug in Pinia mal grün und mal rot sind, und bewertest ihren Umbau mit den Regeln von Simple Design.

Refactoring mit Testnetz in Vue: Composables, Pinia und Simple Design

Bevor die Web-App des Mitfahrlabors eine Anmeldung bekommt, räumt das Team auf. Der Artikel zeigt Refactoring als Praktik aus Extreme Programming: Code Smells im eigenen Code finden, das Testnetz prüfen und mit einem Charakterisierungstest flicken, dann in kleinen Schritten umbauen, nach denen alle Tests grün sind. Doppelte Ladezustände wandern in ein Composable, die gewählte Testperson in einen Store mit Pinia. Unterwegs findet das Team einen Fehler und behebt ihn erst danach, mit dem anderen Hut. Die vier Regeln von Simple Design entscheiden, was in den Store gehört und was nicht.