gouki
d175777d75
Build and Publish Server / build (push) Successful in 2m11s
- AdminAuth 中间件：GET 页面请求未登录时返回 login 页，API 请求仍返回 401 - 新增 Login.js 登录页组件（密码输入 + 登录后跳回原页面） - index.html 注册 login 页面路由
69 lines
2.8 KiB
JavaScript
69 lines
2.8 KiB
JavaScript
// 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;
|
|
}
|
|
}
|
|
}
|
|
};
|