Add embedded Swagger UI page with auto-injected JWT auth
- New /swagger route with lazy-loaded SwaggerPage that initializes swagger-ui-dist and injects the session JWT via requestInterceptor - Move API link from primary nav to navRight utility area (pill style) - Code-split swagger chunk (~1.4 MB) so main bundle stays lean Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
5
ui/src/pages/swagger/SwaggerPage.module.css
Normal file
5
ui/src/pages/swagger/SwaggerPage.module.css
Normal file
@@ -0,0 +1,5 @@
|
||||
.container {
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
29
ui/src/pages/swagger/SwaggerPage.tsx
Normal file
29
ui/src/pages/swagger/SwaggerPage.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useAuthStore } from '../../auth/auth-store';
|
||||
import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
|
||||
import 'swagger-ui-dist/swagger-ui.css';
|
||||
import styles from './SwaggerPage.module.css';
|
||||
|
||||
export function SwaggerPage() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const token = useAuthStore((s) => s.accessToken);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
containerRef.current.innerHTML = '';
|
||||
|
||||
SwaggerUI({
|
||||
url: '/api/v1/api-docs',
|
||||
domNode: containerRef.current,
|
||||
deepLinking: true,
|
||||
requestInterceptor: (req: Record<string, unknown>) => {
|
||||
if (token) {
|
||||
(req.headers as Record<string, string>)['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
return req;
|
||||
},
|
||||
});
|
||||
}, [token]);
|
||||
|
||||
return <div ref={containerRef} className={styles.container} />;
|
||||
}
|
||||
Reference in New Issue
Block a user