Build Frontend Authentication and State Management #73
Description
This issue covers creating the user-facing components and logic required for a seamless login and logout experience.
- Create UI Components: Develop a Login page in Vue.js that captures user credentials and calls the backend authentication endpoint. Add a Logout button to the main application layout that is visible when a user is authenticated.
- Implement State Management: Use a library like Pinia to manage the application's global state. When a user logs in successfully, store the returned JWT securely and update the state to reflect that the user is authenticated. This state will control what the user sees (e.g., showing the logout button).
- Protect Routes: Implement route guards in Vue Router. These guards will check the authentication state before allowing access to protected pages, redirecting unauthenticated users to the Login page.