---
jd-id: "01.04"
name: "src-router"
desc: "vue-router 4 configuration. Declares every authenticated route with auth + layout metadata, plus a navigation guard that proactively refreshes near-expiry access tokens and skips auth when the client is on the LAN."
author: "Clark Lin"
updateTime: "2026-07-06"
status: active
type: "A-高层系统"
tags:
  - 前端
  - Vue3
  - Routing
  - AuthGuard
---

## Core Files

| File path | Role |
|-----------|------|
| `src/router/index.js` | Creates the router with `createWebHistory(import.meta.env.BASE_URL)`, declares all routes, exports `beforeEach` guard. |

---

## Route Map

| Path | Name | `meta.requiresAuth` | `meta.layout` | Notes |
|------|------|---------------------|---------------|-------|
| `/` | `home` | true | `default` | Landing view |
| `/login` | `login` | false | `none` | Bare layout |
| `/profile` | `profile` | true | `default` | |
| `/master-data/students` | `students` | true | `default` | Master Data group |
| `/master-data/subjects` | `subjects` | true | `default` | Master Data group |
| `/master-data/terms` | `terms` | true | `default` | Master Data group |
| `/master-data/stories` | `stories` | true | `default` | Master Data group |
| `/tasks` | `tasks` | true | `default` | Calendar view |
| `/settings` | `settings` | true | `default` | |
| `/:pathMatch(.*)*` | — | — | — | Redirects to `/` |

> Each authenticated route carries a `meta.breadcrumbPath` array (`{ key, to, disabled }`) that `AppLayout` resolves against the i18n bundles.

---

## Navigation Guard

- **LAN bypass** — `isLanAccess()` returns `true` → guard lets the navigation through without auth checks (used during local development when the device is on the same network as the backend).
- **Unauthenticated access** — when `to.meta.requiresAuth && !isAuthenticated`, redirect to `/login`.
- **Proactive refresh** — when the access token will expire within the threshold (default `60s`, see `isAccessTokenExpiringSoon`), the guard awaits `authStore.refreshAccessToken()` before navigating. Failure path cleans up tokens and redirects to `/login`.
- **Already authenticated** — visiting `/login` while logged in redirects to `/`.
- **Login-endpoint 401s** — handled separately by the axios interceptor; they are not retried via the refresh flow.

---

Home: [[01.00 student-app-frontend]] | **Location:** `C:\Projects\vue\student-app-frontend\src\router`