fix: restore Swagger UI on api-docs page
- Change Vite proxy pattern from /api to /api/ so /api-docs client route is not captured and proxied to the backend - Fix SwaggerUIBundle init: remove empty presets/layout overrides that crashed the internal persistConfigs function - Use correct CSS import (swagger-ui.css instead of index.css) - Add requestInterceptor to auto-attach JWT token to Try-it-out calls - Add swagger-ui-bundle to optimizeDeps.include for reliable loading - Remove unused swagger-ui-dist.d.ts type declarations Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,24 +1,32 @@
|
|||||||
import { useEffect, useRef } from 'react';
|
import { useEffect, useRef } from 'react';
|
||||||
import { config } from '../../config';
|
import { config } from '../../config';
|
||||||
|
import { useAuthStore } from '../../auth/auth-store';
|
||||||
|
import 'swagger-ui-dist/swagger-ui.css';
|
||||||
|
|
||||||
export default function SwaggerPage() {
|
export default function SwaggerPage() {
|
||||||
const containerRef = useRef<HTMLDivElement>(null);
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const token = useAuthStore((s) => s.accessToken);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let cleanup: (() => void) | undefined;
|
let cancelled = false;
|
||||||
|
|
||||||
import('swagger-ui-dist/swagger-ui-bundle').then(({ default: SwaggerUIBundle }) => {
|
import('swagger-ui-dist/swagger-ui-bundle').then((mod) => {
|
||||||
if (!containerRef.current) return;
|
const SwaggerUIBundle = mod.default || mod;
|
||||||
|
if (cancelled || !containerRef.current || typeof SwaggerUIBundle !== 'function') return;
|
||||||
SwaggerUIBundle({
|
SwaggerUIBundle({
|
||||||
url: `${config.apiBaseUrl}/api-docs`,
|
url: `${config.apiBaseUrl}/api-docs`,
|
||||||
domNode: containerRef.current,
|
domNode: containerRef.current,
|
||||||
presets: [],
|
requestInterceptor: (req: { headers: Record<string, string> }) => {
|
||||||
layout: 'BaseLayout',
|
if (token) {
|
||||||
|
req.headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return req;
|
||||||
|
},
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => cleanup?.();
|
return () => { cancelled = true; };
|
||||||
}, []);
|
}, [token]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
9
ui/src/swagger-ui-dist.d.ts
vendored
9
ui/src/swagger-ui-dist.d.ts
vendored
@@ -1,9 +0,0 @@
|
|||||||
declare module 'swagger-ui-dist' {
|
|
||||||
export function getAbsoluteFSPath(): string;
|
|
||||||
export const SwaggerUIBundle: unknown;
|
|
||||||
export const SwaggerUIStandalonePreset: unknown;
|
|
||||||
}
|
|
||||||
declare module 'swagger-ui-dist/swagger-ui-bundle' {
|
|
||||||
const SwaggerUIBundle: (config: Record<string, unknown>) => void;
|
|
||||||
export default SwaggerUIBundle;
|
|
||||||
}
|
|
||||||
@@ -9,7 +9,7 @@ export default defineConfig({
|
|||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api/': {
|
||||||
target: apiTarget,
|
target: apiTarget,
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
secure: false,
|
secure: false,
|
||||||
@@ -21,6 +21,9 @@ export default defineConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
optimizeDeps: {
|
||||||
|
include: ['swagger-ui-dist/swagger-ui-bundle'],
|
||||||
|
},
|
||||||
build: {
|
build: {
|
||||||
outDir: 'dist',
|
outDir: 'dist',
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user