oadmin/sub2api
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(frontend): 添加 OAuth 回调路由

Browse Source 
- 新增 /auth/callback 路由用于接收 OAuth 授权回调
- 优化路由配置和文档
- 统一代码格式
This commit is contained in:
ianshaw
2025-12-25 08:41:01 -08:00
parent bceed08fc3
commit 34183b527b
3 changed files with 142 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/router/README.md
View File

@@ -13,38 +13,38 @@ This directory contains the Vue Router configuration for the Sub2API frontend ap
### Public Routes (No Authentication Required) ### Public Routes (No Authentication Required)
| Path | Component | Description | | Path | Component | Description |
|------|-----------|-------------| | ----------- | ------------ | ---------------------- |
| `/login` | LoginView | User login page | | `/login` | LoginView | User login page |
| `/register` | RegisterView | User registration page | | `/register` | RegisterView | User registration page |
### User Routes (Authentication Required) ### User Routes (Authentication Required)
| Path | Component | Description | | Path | Component | Description |
|------|-----------|-------------| | ------------ | ------------- | ---------------------------- |
| `/` | - | Redirects to `/dashboard` | | `/` | - | Redirects to `/dashboard` |
| `/dashboard` | DashboardView | User dashboard with stats | | `/dashboard` | DashboardView | User dashboard with stats |
| `/keys` | KeysView | API key management | | `/keys` | KeysView | API key management |
| `/usage` | UsageView | Usage records and statistics | | `/usage` | UsageView | Usage records and statistics |
| `/redeem` | RedeemView | Redeem code interface | | `/redeem` | RedeemView | Redeem code interface |
| `/profile` | ProfileView | User profile settings | | `/profile` | ProfileView | User profile settings |
### Admin Routes (Admin Role Required) ### Admin Routes (Admin Role Required)
| Path | Component | Description | | Path | Component | Description |
|------|-----------|-------------| | ------------------ | ------------------ | ------------------------------- |
| `/admin` | - | Redirects to `/admin/dashboard` | | `/admin` | - | Redirects to `/admin/dashboard` |
| `/admin/dashboard` | AdminDashboardView | Admin dashboard | | `/admin/dashboard` | AdminDashboardView | Admin dashboard |
| `/admin/users` | AdminUsersView | User management | | `/admin/users` | AdminUsersView | User management |
| `/admin/groups` | AdminGroupsView | Group management | | `/admin/groups` | AdminGroupsView | Group management |
| `/admin/accounts` | AdminAccountsView | Account management | | `/admin/accounts` | AdminAccountsView | Account management |
| `/admin/proxies` | AdminProxiesView | Proxy management | | `/admin/proxies` | AdminProxiesView | Proxy management |
| `/admin/redeem` | AdminRedeemView | Redeem code management | | `/admin/redeem` | AdminRedeemView | Redeem code management |
### Special Routes ### Special Routes
| Path | Component | Description | | Path | Component | Description |
|------|-----------|-------------| | ----------------- | ------------ | -------------- |
| `/:pathMatch(.*)` | NotFoundView | 404 error page | | `/:pathMatch(.*)` | NotFoundView | 404 error page |
## Navigation Guards ## Navigation Guards
@@ -92,15 +92,16 @@ Each route can define the following meta fields:
```typescript ```typescript
interface RouteMeta { interface RouteMeta {
requiresAuth?: boolean; // Default: true (requires authentication) requiresAuth?: boolean // Default: true (requires authentication)
requiresAdmin?: boolean; // Default: false (admin access only) requiresAdmin?: boolean // Default: false (admin access only)
title?: string; // Page title title?: string // Page title
breadcrumbs?: Array<{ // Breadcrumb navigation breadcrumbs?: Array<{
label: string; // Breadcrumb navigation
to?: string; label: string
}>; to?: string
icon?: string; // Icon for navigation menu }>
hideInMenu?: boolean; // Hide from navigation menu icon?: string // Icon for navigation menu
hideInMenu?: boolean // Hide from navigation menu
} }
``` ```
@@ -113,6 +114,7 @@ component: () => import('@/views/user/DashboardView.vue')
``` ```
Benefits: Benefits:
- Reduced initial bundle size - Reduced initial bundle size
- Faster initial page load - Faster initial page load
- Components loaded on-demand - Components loaded on-demand
@@ -123,7 +125,7 @@ Benefits:
The router integrates with the Pinia auth store (`@/stores/auth`): The router integrates with the Pinia auth store (`@/stores/auth`):
```typescript ```typescript
const authStore = useAuthStore(); const authStore = useAuthStore()
// Check authentication status // Check authentication status
authStore.isAuthenticated authStore.isAuthenticated
@@ -137,21 +139,21 @@ authStore.isAdmin
### Programmatic Navigation ### Programmatic Navigation
```typescript ```typescript
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
const router = useRouter(); const router = useRouter()
// Navigate to a route // Navigate to a route
router.push('/dashboard'); router.push('/dashboard')
// Navigate with query parameters // Navigate with query parameters
router.push({ router.push({
path: '/usage', path: '/usage',
query: { filter: 'today' } query: { filter: 'today' }
}); })
// Navigate to admin route (will be blocked if not admin) // Navigate to admin route (will be blocked if not admin)
router.push('/admin/users'); router.push('/admin/users')
``` ```
### Route Links ### Route Links
@@ -165,24 +167,22 @@ router.push('/admin/users');
<router-link :to="{ name: 'Keys' }">API Keys</router-link> <router-link :to="{ name: 'Keys' }">API Keys</router-link>
<!-- With query parameters --> <!-- With query parameters -->
<router-link :to="{ path: '/usage', query: { page: 1 } }"> <router-link :to="{ path: '/usage', query: { page: 1 } }"> Usage </router-link>
Usage
</router-link>
</template> </template>
``` ```
### Checking Current Route ### Checking Current Route
```typescript ```typescript
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router'
const route = useRoute(); const route = useRoute()
// Check if on admin page // Check if on admin page
const isAdminPage = route.path.startsWith('/admin'); const isAdminPage = route.path.startsWith('/admin')
// Get route meta // Get route meta
const requiresAdmin = route.meta.requiresAdmin; const requiresAdmin = route.meta.requiresAdmin
``` ```
## Scroll Behavior ## Scroll Behavior
@@ -199,8 +199,8 @@ The router includes error handling for navigation failures:
```typescript ```typescript
router.onError((error) => { router.onError((error) => {
console.error('Router error:', error); console.error('Router error:', error)
}); })
``` ```
## Testing Routes ## Testing Routes
@@ -229,7 +229,7 @@ Enable Vue Router debug mode:
```typescript ```typescript
// In browser console // In browser console
window.__VUE_ROUTER__ = router; window.__VUE_ROUTER__ = router
// Check current route // Check current route
router.currentRoute.value router.currentRoute.value
@@ -238,14 +238,17 @@ router.currentRoute.value
### Common Issues ### Common Issues
**Issue**: 404 on page refresh **Issue**: 404 on page refresh
- **Cause**: Server not configured for SPA - **Cause**: Server not configured for SPA
- **Solution**: Configure server to serve `index.html` for all routes - **Solution**: Configure server to serve `index.html` for all routes
**Issue**: Navigation guard runs twice **Issue**: Navigation guard runs twice
- **Cause**: Multiple `next()` calls - **Cause**: Multiple `next()` calls
- **Solution**: Ensure only one `next()` call per code path - **Solution**: Ensure only one `next()` call per code path
**Issue**: User data not loaded **Issue**: User data not loaded
- **Cause**: Auth store not initialized - **Cause**: Auth store not initialized
- **Solution**: Call `authStore.checkAuth()` in App.vue or main.ts - **Solution**: Call `authStore.checkAuth()` in App.vue or main.ts

157
frontend/src/router/index.ts
View File

@@ -3,8 +3,8 @@
* Defines all application routes with lazy loading and navigation guards * Defines all application routes with lazy loading and navigation guards
*/ */
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'; import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/stores/auth'; import { useAuthStore } from '@/stores/auth'
/** /**
* Route definitions with lazy loading * Route definitions with lazy loading
@@ -17,8 +17,8 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/setup/SetupWizardView.vue'), component: () => import('@/views/setup/SetupWizardView.vue'),
meta: { meta: {
requiresAuth: false, requiresAuth: false,
title: 'Setup', title: 'Setup'
}, }
}, },
// ==================== Public Routes ==================== // ==================== Public Routes ====================
@@ -28,8 +28,8 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/HomeView.vue'), component: () => import('@/views/HomeView.vue'),
meta: { meta: {
requiresAuth: false, requiresAuth: false,
title: 'Home', title: 'Home'
}, }
}, },
{ {
path: '/login', path: '/login',
@@ -37,8 +37,8 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/auth/LoginView.vue'), component: () => import('@/views/auth/LoginView.vue'),
meta: { meta: {
requiresAuth: false, requiresAuth: false,
title: 'Login', title: 'Login'
}, }
}, },
{ {
path: '/register', path: '/register',
@@ -46,8 +46,8 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/auth/RegisterView.vue'), component: () => import('@/views/auth/RegisterView.vue'),
meta: { meta: {
requiresAuth: false, requiresAuth: false,
title: 'Register', title: 'Register'
}, }
}, },
{ {
path: '/email-verify', path: '/email-verify',
@@ -55,14 +55,23 @@ const routes: RouteRecordRaw[] = [
component: () => import('@/views/auth/EmailVerifyView.vue'), component: () => import('@/views/auth/EmailVerifyView.vue'),
meta: { meta: {
requiresAuth: false, requiresAuth: false,
title: 'Verify Email', title: 'Verify Email'
}, }
},
{
path: '/auth/callback',
name: 'OAuthCallback',
component: () => import('@/views/auth/OAuthCallbackView.vue'),
meta: {
requiresAuth: false,
title: 'OAuth Callback'
}
}, },
// ==================== User Routes ==================== // ==================== User Routes ====================
{ {
path: '/', path: '/',
redirect: '/home', redirect: '/home'
}, },
{ {
path: '/dashboard', path: '/dashboard',
@@ -73,8 +82,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'Dashboard', title: 'Dashboard',
titleKey: 'dashboard.title', titleKey: 'dashboard.title',
descriptionKey: 'dashboard.welcomeMessage', descriptionKey: 'dashboard.welcomeMessage'
}, }
}, },
{ {
path: '/keys', path: '/keys',
@@ -85,8 +94,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'API Keys', title: 'API Keys',
titleKey: 'keys.title', titleKey: 'keys.title',
descriptionKey: 'keys.description', descriptionKey: 'keys.description'
}, }
}, },
{ {
path: '/usage', path: '/usage',
@@ -97,8 +106,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'Usage Records', title: 'Usage Records',
titleKey: 'usage.title', titleKey: 'usage.title',
descriptionKey: 'usage.description', descriptionKey: 'usage.description'
}, }
}, },
{ {
path: '/redeem', path: '/redeem',
@@ -109,8 +118,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'Redeem Code', title: 'Redeem Code',
titleKey: 'redeem.title', titleKey: 'redeem.title',
descriptionKey: 'redeem.description', descriptionKey: 'redeem.description'
}, }
}, },
{ {
path: '/profile', path: '/profile',
@@ -121,8 +130,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'Profile', title: 'Profile',
titleKey: 'profile.title', titleKey: 'profile.title',
descriptionKey: 'profile.description', descriptionKey: 'profile.description'
}, }
}, },
{ {
path: '/subscriptions', path: '/subscriptions',
@@ -133,14 +142,14 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: false, requiresAdmin: false,
title: 'My Subscriptions', title: 'My Subscriptions',
titleKey: 'userSubscriptions.title', titleKey: 'userSubscriptions.title',
descriptionKey: 'userSubscriptions.description', descriptionKey: 'userSubscriptions.description'
}, }
}, },
// ==================== Admin Routes ==================== // ==================== Admin Routes ====================
{ {
path: '/admin', path: '/admin',
redirect: '/admin/dashboard', redirect: '/admin/dashboard'
}, },
{ {
path: '/admin/dashboard', path: '/admin/dashboard',
@@ -151,8 +160,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Admin Dashboard', title: 'Admin Dashboard',
titleKey: 'admin.dashboard.title', titleKey: 'admin.dashboard.title',
descriptionKey: 'admin.dashboard.description', descriptionKey: 'admin.dashboard.description'
}, }
}, },
{ {
path: '/admin/users', path: '/admin/users',
@@ -163,8 +172,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'User Management', title: 'User Management',
titleKey: 'admin.users.title', titleKey: 'admin.users.title',
descriptionKey: 'admin.users.description', descriptionKey: 'admin.users.description'
}, }
}, },
{ {
path: '/admin/groups', path: '/admin/groups',
@@ -175,8 +184,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Group Management', title: 'Group Management',
titleKey: 'admin.groups.title', titleKey: 'admin.groups.title',
descriptionKey: 'admin.groups.description', descriptionKey: 'admin.groups.description'
}, }
}, },
{ {
path: '/admin/subscriptions', path: '/admin/subscriptions',
@@ -187,8 +196,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Subscription Management', title: 'Subscription Management',
titleKey: 'admin.subscriptions.title', titleKey: 'admin.subscriptions.title',
descriptionKey: 'admin.subscriptions.description', descriptionKey: 'admin.subscriptions.description'
}, }
}, },
{ {
path: '/admin/accounts', path: '/admin/accounts',
@@ -199,8 +208,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Account Management', title: 'Account Management',
titleKey: 'admin.accounts.title', titleKey: 'admin.accounts.title',
descriptionKey: 'admin.accounts.description', descriptionKey: 'admin.accounts.description'
}, }
}, },
{ {
path: '/admin/proxies', path: '/admin/proxies',
@@ -211,8 +220,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Proxy Management', title: 'Proxy Management',
titleKey: 'admin.proxies.title', titleKey: 'admin.proxies.title',
descriptionKey: 'admin.proxies.description', descriptionKey: 'admin.proxies.description'
}, }
}, },
{ {
path: '/admin/redeem', path: '/admin/redeem',
@@ -223,8 +232,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Redeem Code Management', title: 'Redeem Code Management',
titleKey: 'admin.redeem.title', titleKey: 'admin.redeem.title',
descriptionKey: 'admin.redeem.description', descriptionKey: 'admin.redeem.description'
}, }
}, },
{ {
path: '/admin/settings', path: '/admin/settings',
@@ -235,8 +244,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'System Settings', title: 'System Settings',
titleKey: 'admin.settings.title', titleKey: 'admin.settings.title',
descriptionKey: 'admin.settings.description', descriptionKey: 'admin.settings.description'
}, }
}, },
{ {
path: '/admin/usage', path: '/admin/usage',
@@ -247,8 +256,8 @@ const routes: RouteRecordRaw[] = [
requiresAdmin: true, requiresAdmin: true,
title: 'Usage Records', title: 'Usage Records',
titleKey: 'admin.usage.title', titleKey: 'admin.usage.title',
descriptionKey: 'admin.usage.description', descriptionKey: 'admin.usage.description'
}, }
}, },
// ==================== 404 Not Found ==================== // ==================== 404 Not Found ====================
@@ -257,10 +266,10 @@ const routes: RouteRecordRaw[] = [
name: 'NotFound', name: 'NotFound',
component: () => import('@/views/NotFoundView.vue'), component: () => import('@/views/NotFoundView.vue'),
meta: { meta: {
title: '404 Not Found', title: '404 Not Found'
}, }
}, }
]; ]
/** /**
* Create router instance * Create router instance
@@ -271,48 +280,48 @@ const router = createRouter({
scrollBehavior(_to, _from, savedPosition) { scrollBehavior(_to, _from, savedPosition) {
// Scroll to saved position when using browser back/forward // Scroll to saved position when using browser back/forward
if (savedPosition) { if (savedPosition) {
return savedPosition; return savedPosition
} }
// Scroll to top for new routes // Scroll to top for new routes
return { top: 0 }; return { top: 0 }
}, }
}); })
/** /**
* Navigation guard: Authentication check * Navigation guard: Authentication check
*/ */
let authInitialized = false; let authInitialized = false
router.beforeEach((to, _from, next) => { router.beforeEach((to, _from, next) => {
const authStore = useAuthStore(); const authStore = useAuthStore()
// Restore auth state from localStorage on first navigation (page refresh) // Restore auth state from localStorage on first navigation (page refresh)
if (!authInitialized) { if (!authInitialized) {
authStore.checkAuth(); authStore.checkAuth()
authInitialized = true; authInitialized = true
} }
// Set page title // Set page title
if (to.meta.title) { if (to.meta.title) {
document.title = `${to.meta.title} - Sub2API`; document.title = `${to.meta.title} - Sub2API`
} else { } else {
document.title = 'Sub2API'; document.title = 'Sub2API'
} }
// Check if route requires authentication // Check if route requires authentication
const requiresAuth = to.meta.requiresAuth !== false; // Default to true const requiresAuth = to.meta.requiresAuth !== false // Default to true
const requiresAdmin = to.meta.requiresAdmin === true; const requiresAdmin = to.meta.requiresAdmin === true
// If route doesn't require auth, allow access // If route doesn't require auth, allow access
if (!requiresAuth) { if (!requiresAuth) {
// If already authenticated and trying to access login/register, redirect to appropriate dashboard // If already authenticated and trying to access login/register, redirect to appropriate dashboard
if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) { if (authStore.isAuthenticated && (to.path === '/login' || to.path === '/register')) {
// Admin users go to admin dashboard, regular users go to user dashboard // Admin users go to admin dashboard, regular users go to user dashboard
next(authStore.isAdmin ? '/admin/dashboard' : '/dashboard'); next(authStore.isAdmin ? '/admin/dashboard' : '/dashboard')
return; return
} }
next(); next()
return; return
} }
// Route requires authentication // Route requires authentication
@@ -320,27 +329,27 @@ router.beforeEach((to, _from, next) => {
// Not authenticated, redirect to login // Not authenticated, redirect to login
next({ next({
path: '/login', path: '/login',
query: { redirect: to.fullPath }, // Save intended destination query: { redirect: to.fullPath } // Save intended destination
}); })
return; return
} }
// Check admin requirement // Check admin requirement
if (requiresAdmin && !authStore.isAdmin) { if (requiresAdmin && !authStore.isAdmin) {
// User is authenticated but not admin, redirect to user dashboard // User is authenticated but not admin, redirect to user dashboard
next('/dashboard'); next('/dashboard')
return; return
} }
// All checks passed, allow navigation // All checks passed, allow navigation
next(); next()
}); })
/** /**
* Navigation guard: Error handling * Navigation guard: Error handling
*/ */
router.onError((error) => { router.onError((error) => {
console.error('Router error:', error); console.error('Router error:', error)
}); })
export default router; export default router

18
frontend/src/router/meta.d.ts vendored
View File

@@ -3,7 +3,7 @@
* Extends the RouteMeta interface with custom properties * Extends the RouteMeta interface with custom properties
*/ */
import 'vue-router'; import 'vue-router'
declare module 'vue-router' { declare module 'vue-router' {
interface RouteMeta { interface RouteMeta {
@@ -11,36 +11,36 @@ declare module 'vue-router' {
* Whether this route requires authentication * Whether this route requires authentication
* @default true * @default true
*/ */
requiresAuth?: boolean; requiresAuth?: boolean
/** /**
* Whether this route requires admin role * Whether this route requires admin role
* @default false * @default false
*/ */
requiresAdmin?: boolean; requiresAdmin?: boolean
/** /**
* Page title for this route * Page title for this route
*/ */
title?: string; title?: string
/** /**
* Optional breadcrumb items for navigation * Optional breadcrumb items for navigation
*/ */
breadcrumbs?: Array<{ breadcrumbs?: Array<{
label: string; label: string
to?: string; to?: string
}>; }>
/** /**
* Icon name for this route (for sidebar navigation) * Icon name for this route (for sidebar navigation)
*/ */
icon?: string; icon?: string
/** /**
* Whether to hide this route from navigation menu * Whether to hide this route from navigation menu
* @default false * @default false
*/ */
hideInMenu?: boolean; hideInMenu?: boolean
} }
} }