feat: 实现用户认证与权限管理系统
- 添加用户、角色、权限等数据模型 - 实现JWT认证中间件和密码加密 - 添加用户注册、登录、个人信息管理接口 - 实现前端认证上下文和受保护路由 - 添加登录历史记录和操作日志功能 - 提供管理员初始化脚本和修复工具 - 实现完整的登录页面和用户管理界面
This commit is contained in:
zhang1106
+372
-140
@@ -1,7 +1,8 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Layout, Menu, theme, Button } from 'antd';
|
||||
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined } from '@ant-design/icons';
|
||||
import { Layout, Menu, theme, Button, Dropdown, Avatar, message, Space, Divider } from 'antd';
|
||||
import { BarChartOutlined, DatabaseOutlined, CloudServerOutlined, MenuUnfoldOutlined, MenuFoldOutlined, EyeOutlined, BuildOutlined, HomeOutlined, ShoppingCartOutlined, InboxOutlined, ImportOutlined, FileTextOutlined, UserOutlined, LogoutOutlined, UserOutlined as UserIcon, HistoryOutlined, AuditOutlined } from '@ant-design/icons';
|
||||
import { BrowserRouter as Router, Routes, Route, Link, Navigate, useLocation, useNavigate } from 'react-router-dom';
|
||||
import { useAuth } from './context/AuthContext';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import DeviceManagement from './pages/DeviceManagement';
|
||||
import RackManagement from './pages/RackManagement';
|
||||
@@ -12,155 +13,386 @@ import ConsumableManagement from './pages/ConsumableManagement';
|
||||
import ConsumableStatistics from './pages/ConsumableStatistics';
|
||||
import ConsumableLogs from './pages/ConsumableLogs';
|
||||
import CategoryManagement from './pages/CategoryManagement';
|
||||
import UserManagement from './pages/UserManagement';
|
||||
import LoginHistory from './pages/LoginHistory';
|
||||
import OperationLogs from './pages/OperationLogs';
|
||||
import Login from './pages/Login';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
const { Content, Sider } = Layout;
|
||||
const { Header, Content, Sider } = Layout;
|
||||
|
||||
function App() {
|
||||
const PrivateRoute = ({ children }) => {
|
||||
const { token, initialized, loading } = useAuth();
|
||||
const location = useLocation();
|
||||
|
||||
if (!initialized) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
background: '#f5f5f5'
|
||||
}}>
|
||||
<Spin size="large" tip="正在加载认证状态..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return <Navigate to="/login" state={{ from: location }} replace />;
|
||||
}
|
||||
|
||||
return children;
|
||||
};
|
||||
|
||||
const AppLayout = ({ children }) => {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const { user, logout } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
token: { colorBgContainer, borderRadiusLG },
|
||||
} = theme.useToken();
|
||||
|
||||
const handleLogout = () => {
|
||||
logout();
|
||||
message.success('已退出登录');
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const userMenuItems = [
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
label: '退出登录',
|
||||
onClick: handleLogout
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Layout>
|
||||
<Sider
|
||||
width={220}
|
||||
collapsedWidth={80}
|
||||
collapsed={collapsed}
|
||||
<Layout>
|
||||
<Sider
|
||||
width={220}
|
||||
collapsedWidth={80}
|
||||
collapsed={collapsed}
|
||||
style={{
|
||||
backgroundColor: colorBgContainer,
|
||||
boxShadow: '2px 0 8px rgba(0,0,0,0.08)',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
height: 64,
|
||||
padding: '0 12px',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
marginBottom: 8
|
||||
}}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
style={{
|
||||
fontSize: 18,
|
||||
padding: '8px',
|
||||
borderRadius: 4
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Menu
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['dashboard']}
|
||||
style={{
|
||||
backgroundColor: colorBgContainer,
|
||||
boxShadow: '2px 0 8px rgba(0,0,0,0.08)'
|
||||
flex: 1,
|
||||
borderRight: 0,
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
key: 'dashboard',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/">仪表盘</Link>,
|
||||
},
|
||||
{
|
||||
key: 'room-management',
|
||||
icon: <HomeOutlined />,
|
||||
label: '机房管理',
|
||||
children: [
|
||||
{
|
||||
key: 'rooms',
|
||||
icon: <HomeOutlined />,
|
||||
label: <Link to="/rooms">机房管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'racks',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/racks">机柜管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'visualization',
|
||||
icon: <EyeOutlined />,
|
||||
label: <Link to="/visualization">机柜可视化</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'asset-management',
|
||||
icon: <BuildOutlined />,
|
||||
label: '资产管理',
|
||||
children: [
|
||||
{
|
||||
key: 'devices',
|
||||
icon: <CloudServerOutlined />,
|
||||
label: <Link to="/devices">设备管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'fields',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/fields">字段管理</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'consumables-management',
|
||||
icon: <ShoppingCartOutlined />,
|
||||
label: '耗材管理',
|
||||
children: [
|
||||
{
|
||||
key: 'consumables-stats',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/consumables-stats">耗材统计</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/consumables">耗材列表</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables-categories',
|
||||
icon: <ImportOutlined />,
|
||||
label: <Link to="/consumables-categories">分类管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables-logs',
|
||||
icon: <FileTextOutlined />,
|
||||
label: <Link to="/consumables-logs">操作日志</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'system-management',
|
||||
icon: <UserOutlined />,
|
||||
label: '系统管理',
|
||||
children: [
|
||||
{
|
||||
key: 'users',
|
||||
icon: <UserOutlined />,
|
||||
label: <Link to="/users">用户管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'login-history',
|
||||
icon: <HistoryOutlined />,
|
||||
label: <Link to="/login-history">登录历史</Link>,
|
||||
},
|
||||
{
|
||||
key: 'operation-logs',
|
||||
icon: <AuditOutlined />,
|
||||
label: <Link to="/operation-logs">操作日志</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Header style={{
|
||||
padding: '0 16px',
|
||||
height: 56,
|
||||
background: colorBgContainer,
|
||||
marginBottom: 24,
|
||||
borderRadius: borderRadiusLG,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 1px 4px rgba(0,0,0,0.08)'
|
||||
}}>
|
||||
{user && (
|
||||
<Space size={12}>
|
||||
<Avatar
|
||||
style={{ backgroundColor: '#1890ff', cursor: 'pointer' }}
|
||||
icon={<UserOutlined />}
|
||||
/>
|
||||
<span style={{ color: '#666', fontSize: 14 }}>{user.username}</span>
|
||||
<Divider type="vertical" style={{ margin: 0 }} />
|
||||
<Button
|
||||
type="text"
|
||||
danger
|
||||
icon={<LogoutOutlined />}
|
||||
onClick={handleLogout}
|
||||
style={{ padding: '4px 8px' }}
|
||||
>
|
||||
退出
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
</Header>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: 64,
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
marginBottom: 16
|
||||
}}>
|
||||
<Button
|
||||
type="text"
|
||||
icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
style={{
|
||||
fontSize: 18,
|
||||
padding: '8px',
|
||||
borderRadius: 4,
|
||||
transition: 'all 0.3s'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Menu
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['dashboard']}
|
||||
style={{
|
||||
height: 'calc(100% - 80px)',
|
||||
borderRight: 0,
|
||||
backgroundColor: 'transparent'
|
||||
}}
|
||||
items={[
|
||||
{
|
||||
key: 'dashboard',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/">仪表盘</Link>,
|
||||
},
|
||||
{
|
||||
key: 'room-management',
|
||||
icon: <HomeOutlined />,
|
||||
label: '机房管理',
|
||||
children: [
|
||||
{
|
||||
key: 'rooms',
|
||||
icon: <HomeOutlined />,
|
||||
label: <Link to="/rooms">机房管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'racks',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/racks">机柜管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'visualization',
|
||||
icon: <EyeOutlined />,
|
||||
label: <Link to="/visualization">机柜可视化</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'asset-management',
|
||||
icon: <BuildOutlined />,
|
||||
label: '资产管理',
|
||||
children: [
|
||||
{
|
||||
key: 'devices',
|
||||
icon: <CloudServerOutlined />,
|
||||
label: <Link to="/devices">设备管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'fields',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/fields">字段管理</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'consumables-management',
|
||||
icon: <ShoppingCartOutlined />,
|
||||
label: '耗材管理',
|
||||
children: [
|
||||
{
|
||||
key: 'consumables-stats',
|
||||
icon: <BarChartOutlined />,
|
||||
label: <Link to="/consumables-stats">耗材统计</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables',
|
||||
icon: <DatabaseOutlined />,
|
||||
label: <Link to="/consumables">耗材列表</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables-categories',
|
||||
icon: <ImportOutlined />,
|
||||
label: <Link to="/consumables-categories">分类管理</Link>,
|
||||
},
|
||||
{
|
||||
key: 'consumables-logs',
|
||||
icon: <FileTextOutlined />,
|
||||
label: <Link to="/consumables-logs">操作日志</Link>,
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Sider>
|
||||
<Layout style={{ padding: '0 24px 24px' }}>
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
borderRadius: borderRadiusLG,
|
||||
}}
|
||||
>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/devices" element={<DeviceManagement />} />
|
||||
<Route path="/racks" element={<RackManagement />} />
|
||||
<Route path="/rooms" element={<RoomManagement />} />
|
||||
<Route path="/fields" element={<DeviceFieldManagement />} />
|
||||
<Route path="/visualization" element={<RackVisualization />} />
|
||||
<Route path="/consumables" element={<ConsumableManagement />} />
|
||||
<Route path="/consumables-categories" element={<CategoryManagement />} />
|
||||
<Route path="/consumables-stats" element={<ConsumableStatistics />} />
|
||||
<Route path="/consumables-logs" element={<ConsumableLogs />} />
|
||||
</Routes>
|
||||
</Content>
|
||||
</Layout>
|
||||
{children}
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<Dashboard />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/devices"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<DeviceManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/racks"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RackManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/rooms"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RoomManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/fields"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<DeviceFieldManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/visualization"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<RackVisualization />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-categories"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<CategoryManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-stats"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableStatistics />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/consumables-logs"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<ConsumableLogs />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/users"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<UserManagement />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/login-history"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<LoginHistory />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="/operation-logs"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<OperationLogs />
|
||||
</AppLayout>
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
<Route path="*" element={<Navigate to="/" replace />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user