Secure Route Access with Angular's CanActivate Guard

Angular's CanActivate guard is a powerful mechanism for controlling access to routes within your application. This challenge asks you to implement a CanActivate guard that determines whether a user should be allowed to navigate to a specific route based on their authentication status. This is a fundamental concept in building secure web applications, preventing unauthorized users from accessing sensitive areas.

Problem Description

You need to create an Angular CanActivate guard called AuthGuard. This guard will determine if a user is logged in before allowing them to access a protected route. The guard should check a boolean property called isAuthenticated on a service called AuthService. If AuthService.isAuthenticated is true, the guard should allow navigation; otherwise, it should redirect the user to a login page (represented by the route /login).

Key Requirements:

• Implement CanActivate: Your AuthGuard class must implement the CanActivate interface.
• Dependency Injection: Inject the AuthService into your AuthGuard.
• Authentication Check: Use AuthService.isAuthenticated to determine access.
• Redirection: If not authenticated, redirect to /login. Use the Router service for redirection.
• Return Value: The guard must return a boolean (allowing access) or a Router object (redirecting).

Expected Behavior:

1. When a user attempts to navigate to a protected route (e.g., /profile) while AuthService.isAuthenticated is false, the AuthGuard should intercept the navigation and redirect the user to /login.
2. When a user attempts to navigate to a protected route while AuthService.isAuthenticated is true, the AuthGuard should allow navigation to proceed.
3. The guard should not block navigation if the user is already on the /login route.

Edge Cases to Consider:

• What happens if AuthService is not properly initialized or isAuthenticated is undefined? (Handle this gracefully, perhaps defaulting to redirecting to /login).
• Consider the scenario where the user navigates directly to /login. The guard should not prevent this.

Examples

Example 1:

Input: User attempts to navigate to `/profile` and `AuthService.isAuthenticated` is `false`.
Output: User is redirected to `/login`.
Explanation: The AuthGuard detects the user is not authenticated and redirects them to the login page.

Example 2:

Input: User attempts to navigate to `/profile` and `AuthService.isAuthenticated` is `true`.
Output: User is allowed to navigate to `/profile`.
Explanation: The AuthGuard detects the user is authenticated and allows navigation to proceed.

Example 3:

Input: User attempts to navigate to `/login` and `AuthService.isAuthenticated` is `false`.
Output: User is allowed to navigate to `/login`.
Explanation: The AuthGuard does not block navigation to the login page.

Constraints

• The AuthService is assumed to be available and properly injected.
• The /login route is assumed to exist.
• The solution must be written in TypeScript and compatible with Angular.
• The solution should be concise and readable.

Notes

• You'll need to import the necessary Angular modules: ActivatedRouteSnapshot, RouterStateSnapshot, Router, and CanActivate.
• Consider using the Router.navigateByUrl() method for redirection.
• Think about how to handle potential errors or undefined values in AuthService.isAuthenticated. A default redirect is a good approach.
• This challenge focuses on the core logic of the CanActivate guard. Error handling and more complex authentication flows are beyond the scope of this exercise.