AI-Agent/inventory-management
1
0
Fork 0
Code Issues Pull Requests Activity

添加登录功能：JWT认证、注册、登录、前端登录页面

Browse Source
This commit is contained in:
cnbugs
2026-06-01 15:54:29 +08:00
parent 188edfa287
commit 0d6c9d26c0
5 changed files with 289 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/static/index.html
+179 -11
View File
@@ -134,11 +134,56 @@
库存管理系统
</div>
<div class="header-right">
<template v-if="isLoggedIn">
<span>欢迎，{{ currentUser }}</span>
<el-button type="danger" size="small" @click="logout">退出</el-button>
</template>
<template v-else>
<el-button type="primary" size="small" @click="loginDialogVisible = true">登录</el-button>
</template>
<span>{{ currentTime }}</span>
</div>
</div>
<div class="main-container">
<!-- 未登录显示登录框 -->
<div v-if="!isLoggedIn" style="display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 60px);">
<div style="background:#fff;padding:40px;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);width:400px;text-align:center;">
<h2 style="margin-bottom:30px;color:#1a1a2e;">{{ isRegister ? '用户注册' : '用户登录' }}</h2>
<el-form v-if="!isRegister" :model="loginForm" @submit.prevent="doLogin">
<el-form-item>
<el-input v-model="loginForm.username" placeholder="用户名" size="large" />
</el-form-item>
<el-form-item>
<el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" @keyup.enter="doLogin" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" style="width:100%;" :loading="loginLoading" @click="doLogin">登录</el-button>
</el-form-item>
<div style="margin-top:20px;">
还没有账号？<a href="#" @click.prevent="isRegister=true" style="color:#409eff;">立即注册</a>
</div>
</el-form>
<el-form v-else :model="registerForm" @submit.prevent="doRegister">
<el-form-item>
<el-input v-model="registerForm.username" placeholder="用户名" size="large" />
</el-form-item>
<el-form-item>
<el-input v-model="registerForm.password" type="password" placeholder="密码" size="large" />
</el-form-item>
<el-form-item>
<el-input v-model="registerForm.nickname" placeholder="昵称（可选）" size="large" />
</el-form-item>
<el-form-item>
<el-button type="primary" size="large" style="width:100%;" :loading="loginLoading" @click="doRegister">注册</el-button>
</el-form-item>
<div style="margin-top:20px;">
已有账号？<a href="#" @click.prevent="isRegister=false" style="color:#409eff;">立即登录</a>
</div>
</el-form>
</div>
</div>
<div v-else class="main-container">
<div class="stat-cards">
<div class="stat-card">
<div class="stat-icon blue">📋</div>
@@ -320,6 +365,94 @@
const app = createApp({
setup() {
const API = '/api';
// 登录状态
const token = ref(localStorage.getItem('token') || '');
const currentUser = ref(localStorage.getItem('username') || '');
const isLoggedIn = ref(!!token.value);
const loginDialogVisible = ref(false);
const loginForm = reactive({ username: '', password: '' });
const registerForm = reactive({ username: '', password: '', nickname: '' });
const loginLoading = ref(false);
const isRegister = ref(false);
// 带认证的fetch
const authFetch = async (url, options = {}) => {
const headers = { ...options.headers };
if (token.value) {
headers['Authorization'] = 'Bearer ' + token.value;
}
const res = await fetch(url, { ...options, headers });
if (res.status === 401) {
logout();
throw new Error('登录已过期，请重新登录');
}
return res;
};
// 登录
const doLogin = async () => {
if (!loginForm.username || !loginForm.password) {
ElementPlus.ElMessage.error('请输入用户名和密码');
return;
}
loginLoading.value = true;
try {
const formData = new FormData();
formData.append('username', loginForm.username);
formData.append('password', loginForm.password);
const res = await fetch(API + '/auth/login', { method: 'POST', body: formData });
const data = await res.json();
if (!res.ok) throw new Error(data.detail || '登录失败');
token.value = data.access_token;
currentUser.value = data.username;
localStorage.setItem('token', data.access_token);
localStorage.setItem('username', data.username);
isLoggedIn.value = true;
loginDialogVisible.value = false;
loginForm.username = '';
loginForm.password = '';
ElementPlus.ElMessage.success('登录成功');
loadStats();
loadInventory();
loadLogs();
} catch (e) {
ElementPlus.ElMessage.error(e.message);
} finally {
loginLoading.value = false;
}
};
// 注册
const doRegister = async () => {
if (!registerForm.username || !registerForm.password) {
ElementPlus.ElMessage.error('请输入用户名和密码');
return;
}
loginLoading.value = true;
try {
const res = await fetch(API + '/auth/register?username=' + encodeURIComponent(registerForm.username) + '&password=' + encodeURIComponent(registerForm.password) + '&nickname=' + encodeURIComponent(registerForm.nickname || ''), { method: 'POST' });
const data = await res.json();
if (!res.ok) throw new Error(data.detail || '注册失败');
ElementPlus.ElMessage.success('注册成功，请登录');
isRegister.value = false;
} catch (e) {
ElementPlus.ElMessage.error(e.message);
} finally {
loginLoading.value = false;
}
};
// 登出
const logout = () => {
token.value = '';
currentUser.value = '';
localStorage.removeItem('token');
localStorage.removeItem('username');
isLoggedIn.value = false;
ElementPlus.ElMessage.success('已退出登录');
};
const activeTab = ref('inventory');
const loading = ref(false);
const currentTime = ref('');
@@ -370,7 +503,7 @@
try {
const params = new URLSearchParams({ page: page.value, page_size: pageSize.value });
if (searchKeyword.value) params.set('search', searchKeyword.value);
const res = await fetch(API + '/inventory?' + params);
const res = await authFetch(API + '/inventory?' + params);
const data = await res.json();
inventoryList.value = data.items || [];
total.value = data.total || 0;
@@ -391,7 +524,7 @@
try {
const params = new URLSearchParams({ page: logPage.value, page_size: logPageSize.value });
if (logSearch.value) params.set('search', logSearch.value);
const res = await fetch(API + '/stock/logs?' + params);
const res = await authFetch(API + '/stock/logs?' + params);
const data = await res.json();
logList.value = data.items || [];
logTotal.value = data.total || 0;
@@ -455,7 +588,7 @@
'确认删除',
{ type: 'warning' }
);
const res = await fetch(API + '/inventory/' + row.id, { method: 'DELETE' });
const res = await authFetch(API + '/inventory/' + row.id, { method: 'DELETE' });
if (!res.ok) throw new Error('删除失败');
ElementPlus.ElMessage.success('删除成功');
loadInventory();
@@ -479,7 +612,7 @@
}
stockLoading.value = true;
try {
const res = await fetch(API + '/stock/operation', {
const res = await authFetch(API + '/stock/operation', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
@@ -502,8 +635,36 @@
}
};
const exportInventory = () => { window.open(API + '/inventory/export', '_blank'); };
const exportLogs = () => { window.open(API + '/stock/export', '_blank'); };
const exportInventory = async () => {
try {
const res = await authFetch(API + '/inventory/export');
if (!res.ok) throw new Error('导出失败');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '库存数据_' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.xlsx';
a.click();
URL.revokeObjectURL(url);
} catch (e) {
ElementPlus.ElMessage.error(e.message);
}
};
const exportLogs = async () => {
try {
const res = await authFetch(API + '/stock/export');
if (!res.ok) throw new Error('导出失败');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = '出入库记录_' + new Date().toISOString().slice(0,19).replace(/:/g,'-') + '.xlsx';
a.click();
URL.revokeObjectURL(url);
} catch (e) {
ElementPlus.ElMessage.error(e.message);
}
};
const clearLogs = async () => {
try {
@@ -512,7 +673,7 @@
'确认清空',
{ type: 'warning' }
);
const res = await fetch(API + '/stock/logs', { method: 'DELETE' });
const res = await authFetch(API + '/stock/logs', { method: 'DELETE' });
if (!res.ok) throw new Error('清空失败');
const data = await res.json();
ElementPlus.ElMessage.success(data.message);
@@ -530,7 +691,7 @@
const formData = new FormData();
formData.append('file', file);
try {
const res = await fetch(API + '/inventory/import', { method: 'POST', body: formData });
const res = await authFetch(API + '/inventory/import', { method: 'POST', body: formData });
const data = await res.json();
if (!res.ok) throw new Error(data.detail || '导入失败');
ElementPlus.ElMessage.success(data.message);
@@ -547,13 +708,20 @@
};
onMounted(() => {
loadInventory();
loadLogs();
if (isLoggedIn.value) {
loadInventory();
loadLogs();
}
updateTime();
setInterval(updateTime, 1000);
});
return {
// 登录状态
token, currentUser, isLoggedIn, loginDialogVisible,
loginForm, registerForm, loginLoading, isRegister,
doLogin, doRegister, logout,
// 业务
activeTab, loading, currentTime,
inventoryList, page, pageSize, total, searchKeyword,
logList, logPage, logPageSize, logTotal, logSearch, logLoading,