Secure Your Vue Routes: Implementing Route Guards

Route guards in Vue.js are essential for controlling access to different parts of your application based on user authentication, roles, or other conditions. This challenge will guide you in creating both authentication and authorization route guards to protect sensitive routes within a Vue application. Successfully completing this challenge will allow you to build more secure and user-friendly applications.

Problem Description

You are tasked with implementing route guards in a Vue.js application using TypeScript. The application has two protected routes: /admin (requires admin role) and /profile (requires authentication). You need to create a hasAuth guard to check if a user is authenticated and a hasAdminRole guard to check if a user has the 'admin' role.

What needs to be achieved:

1. Create a hasAuth route guard that redirects the user to a login page (/login) if they are not authenticated. Assume authentication status is stored in a loggedIn property on a user object.
2. Create a hasAdminRole route guard that redirects the user to a "forbidden" page (/forbidden) if they do not have the 'admin' role. Assume the user's roles are stored in a roles array on the user object.
3. Integrate these route guards into your Vue Router configuration to protect the /admin and /profile routes.

Key Requirements:

• The guards should be reusable and easily configurable.
• The guards should redirect the user to the specified pages if the conditions are not met.
• The guards should not block navigation if the user is already authenticated or has the required role.
• Use TypeScript for type safety and improved code maintainability.

Expected Behavior:

• If a user attempts to access /admin without the 'admin' role, they should be redirected to /forbidden.
• If a user attempts to access /profile without being authenticated (i.e., user.loggedIn is false), they should be redirected to /login.
• If a user is authenticated and has the 'admin' role, they should be able to access both /admin and /profile without redirection.
• If a user is not authenticated but has the 'admin' role (unlikely, but good to consider), they should still be redirected to /login.

Edge Cases to Consider:

• What happens if the user object is undefined or doesn't have the expected properties (loggedIn, roles)? (Assume a default value of false for loggedIn and an empty array for roles if these properties are missing).
• How do you handle potential errors during the authentication check? (For simplicity, assume authentication checks are always successful).

Examples

Example 1:

Input: User object: { loggedIn: false, roles: [] } attempting to access /admin
Output: Redirect to /forbidden
Explanation: The user is not an admin, so the hasAdminRole guard redirects them.

Example 2:

Input: User object: { loggedIn: true, roles: ['user'] } attempting to access /profile
Output: Redirect to /login
Explanation: The user is not authenticated, so the hasAuth guard redirects them.

Example 3:

Input: User object: { loggedIn: true, roles: ['admin', 'user'] } attempting to access /admin
Output: Allow access to /admin
Explanation: The user is authenticated and has the 'admin' role, so access is granted.

Constraints

• The application uses Vue 3 and Vue Router 4.
• The user object is assumed to be available globally (e.g., through a Vuex store or a reactive variable). For this challenge, you can simulate it with a simple variable.
• The login, profile, admin, and forbidden pages are assumed to exist. You don't need to implement these pages themselves.
• The solution should be well-structured and easy to understand.
• The solution should be written in TypeScript.

Notes

• Consider using the next function provided by the route guard to control navigation.
• Think about how to make your guards reusable and configurable.
• You can use a simple user object for testing purposes. For example: const user = { loggedIn: true, roles: ['user'] };
• Focus on the logic of the route guards themselves, not the entire application.
• The goal is to demonstrate your understanding of route guards and TypeScript.