Framework7 Router Guard Configuration for Expired Credential Handling

Answer

Using a global authentication store eliminates duplicated token‑expiry checks and gives a single source of truth, while per‑guard checks keep the setup simple but risk inconsistent protection when new routes are added.

Trade‑offs

• Global store: centralises auth state, reduces boilerplate, guarantees that every guard reads the same validity flag; adds a small amount of extra code and a learning curve for teams unfamiliar with Framework7 Store or an external Redux/Vuex integration.
• Per‑guard duplication: quick to implement for a few routes, no extra dependencies; however each new route must remember to copy the check, and a missed guard can leave a privileged page accessible after token expiry.

Guaranteeing Consistent Enforcement

1. Decide whether the project already uses a centralized state store (Framework7 Store, Vuex, Redux, etc.).
2. If a store exists, create an auth module that exposes isAuthenticated and isTokenExpired getters and updates them on login, refresh, and logout.
3. Write a higher‑order guard function, e.g. requireAuth(routeTo, routeFrom, next), that reads the store’s getters and redirects to the login page when the token is invalid or expired.
4. Apply this wrapper to every route definition that needs protection, either by wrapping the route object directly or by using a children array with a meta flag that the global router.beforeEach checks.
5. Optionally, add a global router.beforeEach that looks for a meta.requiresAuth flag and delegates to the wrapper, so you never have to touch individual route files again.

Missing Diagnostic Detail

Does the project already use a centralized state store? If yes, leverage it for the auth module; if not, a lightweight wrapper guard is the simplest path.

Should Framework7 Provide Built‑in Middleware?

Framework7 intentionally avoids coupling to a specific auth strategy, so a built‑in token‑expiry interceptor would limit flexibility. Keeping the responsibility in application code lets teams choose their own store, token format, or refresh‑logic while still benefiting from the router’s extension points.