fix(admin): 浏览器直接访问后台时渲染登录页而非401 JSON

- AdminAuth 中间件：GET 页面请求未登录时返回 login 页，API 请求仍返回 401 - 新增 Login.js 登录页组件（密码输入 + 登录后跳回原页面） - index.html 注册 login 页面路由
2026-08-11 21:23:09 +00:00
parent 0256f4e7f3
commit d175777d75
3 changed files with 86 additions and 10 deletions
@@ -0,0 +1,68 @@
+// Login 管理员登录页
+export default {
+    template: `
+        <div class="min-h-screen bg-gray-100 flex items-center justify-center px-4">
+            <div class="max-w-sm w-full bg-white rounded-lg shadow-md p-8">
+                <div class="text-center mb-6">
+                    <h1 class="text-2xl font-bold text-red-600">祈福小助手</h1>
+                    <p class="text-gray-500 text-sm mt-1">管理后台登录</p>
+                </div>
+                <form @submit.prevent="submit">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">管理密码</label>
+                        <input
+                            v-model="password"
+                            type="password"
+                            autocomplete="current-password"
+                            placeholder="请输入 ADMIN_PASSWORD"
+                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
+                            :disabled="loading"
+                        />
+                    </div>
+                    <div v-if="error" class="mb-4 text-sm text-red-600">{{ error }}</div>
+                    <button
+                        type="submit"
+                        :disabled="loading || !password"
+                        class="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
+                    >
+                        {{ loading ? '登录中...' : '登 录' }}
+                    </button>
+                </form>
+            </div>
+        </div>
+    `,
+    data() {
+        return {
+            password: '',
+            loading: false,
+            error: ''
+        };
+    },
+    methods: {
+        async submit() {
+            if (!this.password || this.loading) return;
+            this.loading = true;
+            this.error = '';
+            try {
+                const res = await fetch('/admin/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ password: this.password })
+                });
+                const data = await res.json();
+                if (data.code === 0) {
+                    // Cookie 已由服务端写入，跳回原本要访问的页面
+                    window.location.href = window.location.pathname === '/admin/login'
+                        ? '/admin/'
+                        : window.location.pathname;
+                } else {
+                    this.error = data.msg || '登录失败';
+                }
+            } catch (e) {
+                this.error = '网络错误，请重试';
+            } finally {
+                this.loading = false;
+            }
+        }
+    }
+};