Implementing Authentication Middleware in a Vue.js Application (TypeScript)

This challenge focuses on building a reusable authentication middleware component in a Vue.js application using TypeScript. Middleware allows you to intercept requests to routes and perform actions like checking authentication status before allowing access, making your application more secure and maintainable. You'll create a component that checks for a user token and redirects unauthenticated users to a login page.

Problem Description

You need to implement a Vue.js component that acts as middleware for your application's routes. This middleware component should:

1. Check for Authentication: Determine if a user is authenticated by checking for the presence of a valid authentication token stored in local storage under the key 'authToken'.
2. Redirect Unauthenticated Users: If no token is found (user is not authenticated), redirect the user to a designated login page (e.g., /login).
3. Allow Authenticated Users: If a token is found (user is authenticated), allow the navigation to proceed to the intended route.
4. Handle Token Expiration (Optional): Ideally, the middleware should also check if the token is expired. For simplicity, this challenge does not require token expiration checking, but it's a good consideration for future expansion.
5. Be Reusable: The component should be designed to be easily reusable across different routes within your Vue.js application.

Expected Behavior:

• When a user navigates to a protected route without a valid 'authToken' in local storage, they should be immediately redirected to the /login route.
• When a user navigates to a protected route with a valid 'authToken' in local storage, they should be allowed to access the route.
• The middleware should not interfere with navigation to routes that are not designated as "protected."

Examples

Example 1:

Input: User navigates to `/profile` and local storage does *not* contain 'authToken'.
Output: User is redirected to `/login`.
Explanation: The middleware detects the absence of the token and redirects to the login page.

Example 2:

Input: User navigates to `/profile` and local storage *does* contain a valid 'authToken'.
Output: User remains on `/profile`.
Explanation: The middleware detects the presence of the token and allows navigation to proceed.

Example 3:

Input: User navigates to `/about` and local storage contains or does not contain 'authToken'.
Output: User remains on `/about`.
Explanation: `/about` is not a protected route, so the middleware does not interfere.

Constraints

• Vue.js Version: Vue 3 is assumed.
• TypeScript: The solution must be written in TypeScript.
• Navigation: Use router.push() from Vue Router to handle navigation. Assume Vue Router is already set up in your application.
• Local Storage: Use localStorage to store and retrieve the authentication token.
• Protected Routes: Assume protected routes are defined in your Vue Router configuration. The middleware component should not need to know the specific route paths; it should simply check for the token's presence.
• Login Route: The login route is assumed to be /login.

Notes

• Consider using a composition API approach for the middleware component.
• Think about how to make the middleware component configurable (e.g., allowing the login route to be passed as a prop). While not strictly required, it demonstrates good design principles.
• Focus on creating a clean, reusable, and well-documented component.
• Error handling (e.g., what happens if localStorage is unavailable) is not required for this challenge, but is a good consideration for production code.
• The core of the challenge is the logic for checking the token and redirecting the user. The overall application structure is assumed to be already in place.