Implementing Route Guards in Vue 3 with TypeScript

Vue Router provides a powerful mechanism for protecting routes using "navigation guards." These guards act as middleware, allowing you to control access to specific routes based on certain conditions before navigation occurs. This challenge focuses on implementing custom route guards in a Vue 3 application using TypeScript.

Problem Description

Your task is to create and implement a route guard that prevents users from accessing a specific route if they are not authenticated. You will need to define a custom guard function, integrate it with your Vue Router configuration, and simulate an authentication state to test its behavior.

Key Requirements:

• Create a custom navigation guard function: This function will be responsible for checking the authentication status.
• Integrate the guard with Vue Router: Apply the guard to a protected route.
• Simulate authentication: Implement a simple mechanism to toggle between authenticated and unauthenticated states.
• Handle redirection: When an unauthenticated user attempts to access the protected route, they should be redirected to a designated "login" route.
• Allow authenticated access: Authenticated users should be able to navigate to the protected route without issue.

Expected Behavior:

1. When an unauthenticated user navigates to /dashboard (the protected route), they should be redirected to /login.
2. When an authenticated user navigates to /dashboard, they should be able to access it.
3. When an unauthenticated user navigates to any other route (e.g., /about), they should be able to access it freely.

Edge Cases to Consider:

• What happens if the user is already on the login page and tries to navigate to the dashboard while unauthenticated? They should still be redirected to the login page (effectively staying there).
• Ensure the guard correctly handles initial route loads.

Examples

Example 1: Unauthenticated Access to Protected Route

• Initial State: isAuthenticated = false
• Navigation Attempt: User attempts to navigate to /dashboard
• Output: User is redirected to /login. The /dashboard route is not rendered.

Example 2: Authenticated Access to Protected Route

• Initial State: isAuthenticated = true
• Navigation Attempt: User attempts to navigate to /dashboard
• Output: User successfully navigates to /dashboard. The /dashboard route is rendered.

Example 3: Unauthenticated Access to Public Route

• Initial State: isAuthenticated = false
• Navigation Attempt: User attempts to navigate to /about
• Output: User successfully navigates to /about. The /dashboard route is not involved.

Constraints

• Vue Router version 4.x.
• TypeScript must be used for all code.
• The solution should be implemented within a standard Vue 3 project structure (e.g., using Vite or Vue CLI).
• The authentication state can be managed using a simple boolean variable or a basic Pinia/Vuex store. For this challenge, a simple boolean is sufficient.

Notes

Consider using a beforeEach navigation guard in your Vue Router configuration. This type of guard is executed before any route transition occurs. You'll need to define your routes, including the protected route and a designated login route. Think about how you will store and access the authentication status within your guard.

Success will be measured by the correct implementation of the navigation guard, ensuring that users can only access the protected route when authenticated, and are properly redirected otherwise.