使用VALKEY缓存登录装唐

2026-04-04 11:49:38 +08:00
parent a55c0cc30e
commit 1195a16cf1
7 changed files with 305 additions and 75 deletions
--- a/.env.example
+++ b/.env.example
@@ -11,3 +11,7 @@ S3_FORCE_PATH_STYLE=true

 # Application Title
 APP_TITLE=S3 Media Transcoder
+
+# Session Cache (Valkey / Redis)
+VALKEY_URL=redis://localhost:6379
+VALKEY_DB=0
--- a/ecosystem.config.js
+++ b/ecosystem.config.js
@@ -17,7 +17,9 @@ module.exports = {
        S3_BUCKET_ADDRESS: 'https://s3.example.com/your_bucket_name',
        S3_ENDPOINT: 'http://127.0.0.1:9000',
        S3_FORCE_PATH_STYLE: 'true',
-        APP_TITLE: 'S3 Media Transcoder'
+        APP_TITLE: 'S3 Media Transcoder',
+        VALKEY_URL: 'redis://localhost:6379',
+        VALKEY_DB: 0
      }
    }
  ]
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "fluent-ffmpeg": "^2.1.3",
+    "ioredis": "^5.3.0",
    "ws": "^8.13.0"
  }
 }
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -10,6 +10,17 @@
    --font-main: 'Inter', sans-serif;
 }

+:root[data-theme="dark"] {
+    --bg-dark: #0f172a;
+    --panel-bg: rgba(30, 41, 59, 0.85);
+    --panel-border: rgba(148, 163, 184, 0.15);
+    --text-primary: #f8fafc;
+    --text-secondary: #94a3b8;
+    --accent: #3b82f6;
+    --accent-hover: #60a5fa;
+    --accent-glow: rgba(59, 130, 246, 0.35);
+}
+
 * {
    margin: 0;
    padding: 0;
@@ -247,10 +258,37 @@ header p {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-size: 1.25rem;
-    font-weight: 700;
    display: flex;
    align-items: center;
-    justify-content: flex-start;
+    justify-content: space-between;
+}
+
+.banner-title {
+    font-weight: 700;
+}
+
+.user-controls {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    font-size: 0.95rem;
+    font-weight: 500;
+}
+
+.user-info {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+#theme-selector {
+    background: var(--panel-bg);
+    color: var(--text-primary);
+    border: 1px solid var(--panel-border);
+    padding: 0.35rem 0.5rem;
+    border-radius: 6px;
+    font-size: 0.9rem;
+    outline: none;
 }

 .top-banner.hidden {
@@ -699,8 +737,15 @@ header p {
 }

@keyframes statusPulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
-    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
+    }
+
+    50% {
+        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+    }
 }

 .control-btn {
@@ -907,8 +952,15 @@ header p {
 }

@keyframes phaseIn {
-    from { opacity: 0; transform: translateY(12px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+        opacity: 0;
+        transform: translateY(12px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }

 .phase-container h3 {
@@ -940,8 +992,15 @@ header p {
 }

@keyframes pulse-download {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.3); }
-    50% { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);
+    }
 }

 .phase-icon.transcode-icon {
@@ -951,8 +1010,15 @@ header p {
 }

@keyframes pulse-transcode {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3); }
-    50% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
+
+    0%,
+    100% {
+        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3);
+    }
+
+    50% {
+        box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
+    }
 }

 /* Transcode stats */
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -10,6 +11,7 @@
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/style.css?v=2">
 </head>
+
 <body>
    <div class="background-effects">
        <div class="glow-orb orb-1"></div>
@@ -34,7 +36,21 @@
    </div>

    <div class="container hidden" id="app-container">
-        <div id="top-banner" class="top-banner hidden"></div>
+        <div id="top-banner" class="top-banner hidden">
+            <div id="top-banner-title" class="banner-title"></div>
+            <div class="user-controls">
+                <label>页面主题：
+                    <select id="theme-selector">
+                        <option value="light">白天模式</option>
+                        <option value="dark">深夜模式</option>
+                    </select>
+                </label>
+                <div class="user-info">
+                    <span id="current-username"></span>
+                    <button id="logout-btn" class="action-btn">退出登录</button>
+                </div>
+            </div>
+        </div>

        <main class="dashboard">
            <section class="video-list-section glass-panel">
@@ -75,7 +91,13 @@
                        <!-- Download Phase -->
                        <div id="download-phase" class="phase-container">
                            <div class="phase-icon download-icon">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                                    <polyline points="7 10 12 15 17 10" />
+                                    <line x1="12" y1="15" x2="12" y2="3" />
+                                </svg>
                            </div>
                            <h3>正在从 S3 下载源文件...</h3>
                            <p id="download-size-text" class="phase-detail">准备下载...</p>
@@ -89,7 +111,12 @@
                        <!-- Transcode Phase -->
                        <div id="transcode-phase" class="phase-container hidden">
                            <div class="phase-icon transcode-icon">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
+                                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"
+                                    fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <polygon points="23 7 16 12 23 17 23 7" />
+                                    <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+                                </svg>
                            </div>
                            <h3>正在转码并流式传输...</h3>
                            <p id="transcode-detail-text" class="phase-detail">FFmpeg 转码中...</p>
@@ -106,7 +133,8 @@
                            </div>
                        </div>
                    </div>
-                    <video id="video-player" preload="auto" controls playsinline webkit-playsinline class="hidden"></video>
+                    <video id="video-player" preload="auto" controls playsinline webkit-playsinline
+                        class="hidden"></video>
                    <div id="seeking-overlay" class="seeking-overlay hidden">
                        <div class="spinner"></div>
                        <span>跳转中...</span>
@@ -125,4 +153,5 @@
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="/js/main.js?v=2"></script>
 </body>
+
 </html>
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -19,6 +19,10 @@ document.addEventListener('DOMContentLoaded', () => {
    const currentVideoTitle = document.getElementById('current-video-title');
    const transcodeBtn = document.getElementById('transcode-btn');
    const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
+    const themeSelector = document.getElementById('theme-selector');
+    const currentUsername = document.getElementById('current-username');
+    const logoutBtn = document.getElementById('logout-btn');
+    const topBannerTitle = document.getElementById('top-banner-title');
    const playBtn = document.getElementById('play-btn');
    const topBanner = document.getElementById('top-banner');
    const customControls = document.getElementById('custom-controls');
@@ -138,8 +142,13 @@ document.addEventListener('DOMContentLoaded', () => {
        const decoder = 'auto';
        const encoder = encoderSelect?.value || 'h264_rkmpp';
        let streamUrl = `/api/hls/playlist.m3u8?bucket=${encodeURIComponent(selectedBucket)}&key=${encodeURIComponent(selectedKey)}&decoder=${encodeURIComponent(decoder)}&encoder=${encodeURIComponent(encoder)}`;
+        const sessionId = localStorage.getItem('sessionId');
+        if (sessionId) {
+            streamUrl += `&sessionId=${encodeURIComponent(sessionId)}`;
+        } else {
            if (s3Username) streamUrl += `&username=${encodeURIComponent(s3Username)}`;
            if (s3Password) streamUrl += `&password=${encodeURIComponent(s3Password)}`;
+        }
        return streamUrl;
    };

@@ -531,7 +540,7 @@ document.addEventListener('DOMContentLoaded', () => {
            if (!res.ok) throw new Error('Failed to load config');
            const data = await res.json();
            const title = data.title || 'S3 Media Transcoder';
-            topBanner.textContent = title;
+            if (topBannerTitle) topBannerTitle.textContent = title;
            topBanner.classList.remove('hidden');
            document.title = title;
            populateSelect(encoderSelect, data.videoEncoders || [], data.defaultVideoEncoder || 'h264_rkmpp');
@@ -572,6 +581,21 @@ document.addEventListener('DOMContentLoaded', () => {
        if (s3Password) s3AuthHeaders['X-S3-Password'] = s3Password;
    };

+    const setSessionAuth = (sessionId, username) => {
+        s3AuthHeaders = { 'X-Session-ID': sessionId };
+        localStorage.setItem('sessionId', sessionId);
+        if (username) {
+            localStorage.setItem('username', username);
+            if (currentUsername) currentUsername.textContent = username;
+        }
+    };
+
+    const clearSessionAuth = () => {
+        s3AuthHeaders = {};
+        localStorage.removeItem('sessionId');
+        localStorage.removeItem('username');
+    };
+
    const showLogin = () => {
        if (loginScreen) loginScreen.classList.remove('hidden');
        if (appContainer) appContainer.classList.add('hidden');
@@ -618,16 +642,19 @@ document.addEventListener('DOMContentLoaded', () => {
        clearLoginError();

        try {
-            setAuthHeaders(username, password);
-            const res = await fetch('/api/buckets', { headers: s3AuthHeaders });
+            const res = await fetch('/api/login', { 
+                method: 'POST', 
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password })
+            });
+            const data = await res.json();
            if (!res.ok) {
-                const data = await res.json().catch(() => ({}));
                throw new Error(data.error || 'Login failed');
            }
-            const data = await res.json();
            if (!Array.isArray(data.buckets) || data.buckets.length === 0) {
                throw new Error('No buckets available for this account');
            }
+            setSessionAuth(data.sessionId, data.username);
            renderBuckets(data.buckets);
            showApp();
            selectedBucket = data.buckets[0].Name;
@@ -638,7 +665,7 @@ document.addEventListener('DOMContentLoaded', () => {
        } catch (err) {
            console.error('Login error:', err);
            showLoginError(err.message);
-            setAuthHeaders('', '');
+            clearSessionAuth();
        } finally {
            if (loginBtn) {
                loginBtn.disabled = false;
@@ -1088,6 +1115,61 @@ document.addEventListener('DOMContentLoaded', () => {
        });
    }

-    // Initial state: require login before loading data
-    showLogin();
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            const sessionId = localStorage.getItem('sessionId');
+            if (sessionId) {
+                try {
+                    await fetch('/api/logout', { 
+                        method: 'POST', 
+                        headers: { 'X-Session-ID': sessionId } 
+                    });
+                } catch(e){}
+            }
+            clearSessionAuth();
+            location.reload();
+        });
+    }
+
+    if (themeSelector) {
+        themeSelector.addEventListener('change', (e) => {
+            const theme = e.target.value;
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+        });
+    }
+
+    const initApp = async () => {
+        const savedSession = localStorage.getItem('sessionId');
+        const savedUsername = localStorage.getItem('username');
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        if (themeSelector) themeSelector.value = savedTheme;
+
+        if (savedSession) {
+            setSessionAuth(savedSession, savedUsername);
+            try {
+                const res = await fetch('/api/buckets', { headers: s3AuthHeaders });
+                if (!res.ok) throw new Error('Session invalid');
+                const data = await res.json();
+                renderBuckets(data.buckets);
+                showApp();
+                selectedBucket = data.buckets[0].Name;
+                if (bucketSelect) bucketSelect.value = selectedBucket;
+                loadConfig();
+                connectWebSocket();
+                await fetchVideos(selectedBucket);
+            } catch (err) {
+                console.error('Auto login failed:', err);
+                clearSessionAuth();
+                showLogin();
+            }
+        } else {
+            showLogin();
+        }
+    };
+
+    // Initial state: attempt auto login
+    initApp();
 });
--- a/server.js
+++ b/server.js
@@ -8,6 +8,8 @@ const http = require('http');
 const WebSocket = require('ws');
 const ffmpeg = require('fluent-ffmpeg');
 const { S3Client, ListBucketsCommand, ListObjectsV2Command, GetObjectCommand } = require('@aws-sdk/client-s3');
+const crypto = require('crypto');
+const Redis = require('ioredis');

 dotenv.config();

@@ -29,6 +31,12 @@ if (typeof ffmpeg.setFfprobePath === 'function') {
    ffmpeg.setFfprobePath(JELLYFIN_FFPROBE_PATH);
 }

+const redisUrl = process.env.VALKEY_URL || process.env.REDIS_URL || 'redis://localhost:6379';
+const redisDb = parseInt(process.env.VALKEY_DB || process.env.REDIS_DB || '0', 10);
+const redisClient = new Redis(redisUrl, {
+    db: isNaN(redisDb) ? 0 : redisDb
+});
+
 app.use(cors());
 app.use(express.json());
 app.use(express.static('public'));
@@ -264,8 +272,20 @@ const stopActiveTranscode = (progressKey) => {
    return true;
 };

-const extractS3Credentials = (req) => {
+const extractS3Credentials = async (req) => {
    const query = req.query || {};
+    const sessionId = req.headers['x-session-id'] || req.body?.sessionId || query.sessionId || '';
+    if (sessionId) {
+        try {
+            const cachedCreds = await redisClient.get(`session:${sessionId}`);
+            if (cachedCreds) {
+                const creds = JSON.parse(cachedCreds);
+                return { username: creds.username, password: creds.password };
+            }
+        } catch (e) {
+            console.error('Session retrieval error:', e);
+        }
+    }
    const username = req.headers['x-s3-username'] || req.body?.username || query.username || query.accessKeyId || '';
    const password = req.headers['x-s3-password'] || req.body?.password || query.password || query.secretAccessKey || '';
    return {
@@ -328,10 +348,9 @@ const clearDownloadCache = () => {
 };


-// Endpoint to list available buckets
 app.get('/api/buckets', async (req, res) => {
    try {
-        const auth = extractS3Credentials(req);
+        const auth = await extractS3Credentials(req);
        const s3Client = createS3Client(auth);
        const command = new ListBucketsCommand({});
        const response = await s3Client.send(command);
@@ -351,7 +370,7 @@ app.get('/api/videos', async (req, res) => {
            return res.status(400).json({ error: 'Bucket name is required' });
        }
        const allObjects = [];
-        const auth = extractS3Credentials(req);
+        const auth = await extractS3Credentials(req);
        const s3Client = createS3Client(auth);
        let continuationToken;

@@ -387,6 +406,33 @@ app.get('/api/videos', async (req, res) => {
    }
 });

+app.post('/api/login', async (req, res) => {
+    const { username, password } = req.body;
+    if (!username || !password) return res.status(400).json({ error: 'Missing credentials' });
+    try {
+        const s3Client = createS3Client({ username, password });
+        const command = new ListBucketsCommand({});
+        const response = await s3Client.send(command);
+        const buckets = response.Buckets || [];
+
+        const sessionId = crypto.randomBytes(32).toString('hex');
+        await redisClient.set(`session:${sessionId}`, JSON.stringify({ username, password }), 'EX', 7 * 24 * 3600);
+
+        res.json({ success: true, sessionId, username, buckets });
+    } catch (error) {
+        console.error('Login error:', error);
+        res.status(401).json({ error: 'Login failed', detail: error.message });
+    }
+});
+
+app.post('/api/logout', async (req, res) => {
+    const sessionId = req.headers['x-session-id'] || req.body?.sessionId;
+    if (sessionId) {
+        try { await redisClient.del(`session:${sessionId}`); } catch (e) { }
+    }
+    res.json({ success: true });
+});
+
 app.get('/api/config', (req, res) => {
    const title = process.env.APP_TITLE || 'S3 Media Transcoder';
    res.json({
@@ -467,7 +513,7 @@ app.get('/api/hls/playlist.m3u8', async (req, res) => {
    const safeBucket = bucket.replace(/[^a-zA-Z0-9_\-]/g, '_');
    const tmpInputPath = path.join(CACHE_DIR, `s3-input-${safeBucket}-${safeKeySegments.join('-')}.tmp`);

-    const auth = extractS3Credentials(req);
+    const auth = await extractS3Credentials(req);
    const s3Client = createS3Client(auth);
    let totalBytes = 0;
    const progressKey = getProgressKey(key);
@@ -734,7 +780,7 @@ app.get('/api/stream', async (req, res) => {
    const tmpInputPath = path.join(CACHE_DIR, `s3-input-${safeBucket}-${safeKeySegments.join('-')}.tmp`);
    const cacheExists = fs.existsSync(tmpInputPath);

-    const auth = extractS3Credentials(req);
+    const auth = await extractS3Credentials(req);
    const s3Client = createS3Client(auth);

    try {