超级管理员登录设置

This commit is contained in:
dxc
2026-02-04 13:30:07 +08:00
parent 4aa43a0607
commit 13590b1fac
21 changed files with 881 additions and 104 deletions

View File

@ -2,37 +2,50 @@
from flask import Flask
from config import Config
from app.extensions import db, migrate, cors
# 【修改】增加 jwt 引入
from app.extensions import db, migrate, cors, jwt
import os
def create_app():
app = Flask(__name__)
app.config.from_object(Config)
# =========================================================
# 1. 初始化插件
# =========================================================
db.init_app(app)
migrate.init_app(app, db)
# 【新增】初始化 JWT (用于 Token 认证)
jwt.init_app(app)
# 确保跨域配置
# 允许 /api/ 开头的请求跨域
cors.init_app(app, resources={r"/*": {"origins": "*"}}) # 放宽跨域限制,防止图片访问被拦截
cors.init_app(app, resources={r"/*": {"origins": "*"}})
# =========================================================
# 2. 注册蓝图 (Blueprints)
# =========================================================
# -----------------------------------------------------
# 2.0 [新增] 注册权限与认证模块 (Auth) - 最关键修复
# -----------------------------------------------------
try:
from app.api.v1.auth import auth_bp
# 前端请求地址: /api/v1/auth/login
app.register_blueprint(auth_bp, url_prefix='/api/v1/auth')
print("✅ Auth (System & Login) 模块注册成功")
except ImportError as e:
print(f"❌ 错误: Auth 模块导入失败: {e}")
# -----------------------------------------------------
# 2.1 注册入库聚合模块 (Inbound)
# -----------------------------------------------------
try:
# 指向聚合文件: app/api/v1/inbound/__init__.py
from app.api.v1.inbound import inbound_bp
# 注册父蓝图,路由前缀为 /api/v1/inbound
app.register_blueprint(inbound_bp, url_prefix='/api/v1/inbound')
print("✅ Inbound (Buy, Semi, Product, Base) 模块注册成功")
except ImportError as e:
print(f"❌ 错误: Inbound 模块导入失败: {e}")
@ -41,34 +54,36 @@ def create_app():
# -----------------------------------------------------
try:
from app.api.v1.common.print import print_bp
# 注册打印蓝图
app.register_blueprint(print_bp, url_prefix='/api/v1/common/print')
print("✅ Print (Label Printing) 模块注册成功")
except ImportError as e:
print(f"❌ 错误: Print 模块导入失败: {e}")
# -----------------------------------------------------
# 2.3 [新增] 注册通用上传模块 (Common Upload)
# 2.3 注册通用上传模块 (Common Upload)
# -----------------------------------------------------
try:
from app.api.v1.common.upload import upload_bp
# 【核心修改】注册方式 1: 标准路径 (对应 /api/v1/common/files/xxx)
# 注册方式 1: 标准路径
app.register_blueprint(upload_bp, url_prefix='/api/v1/common')
# 【核心修改】注册方式 2: 兼容路径 (对应 /v1/common/files/xxx)
# 解决部分代理服务器剥离 /api 前缀导致的 404 问题
# name='upload_fallback' 防止蓝图名称冲突
# 注册方式 2: 兼容路径 (防止反向代理剥离 /api)
app.register_blueprint(upload_bp, url_prefix='/v1/common', name='upload_fallback')
print("✅ Upload (File Storage) 模块注册成功 (双路径兼容模式)")
except ImportError as e:
print(f"❌ 错误: Upload 模块导入失败: {e}")
# -----------------------------------------------------
# 2.4 [新增] 注册业务操作模块 (Transactions)
# -----------------------------------------------------
try:
# 对应 borrow, return, scrap 等操作
from app.api.v1.transactions import trans_bp
app.register_blueprint(trans_bp, url_prefix='/api/v1/trans')
print("✅ Transactions (Borrow, Return, Scrap) 模块注册成功")
except ImportError as e:
# 如果文件还没写好,这里会报错,但不影响主程序启动
print(f"⚠️ 警告: Transaction 模块导入失败 (如果是新建项目可忽略): {e}")
# =========================================================
# 3. 预加载数据模型 (解决 relationship 找不到模型的问题)
# =========================================================
@ -83,11 +98,16 @@ def create_app():
# 4. 成品入库
from app.models.inbound.product import StockProduct
# 开发环境如果需要自动建表,可以取消注释
# 【新增】5. 系统用户 (关键:确保创建 user 表)
from app.models.system import SysUser, SysLog
# 【新增】6. 业务流水
from app.models.transaction import TransBorrow, TransRepair, TransScrap
# 开发环境自动建表 (根据之前的对话,强烈建议在容器第一次启动时开启或手动调用)
# db.create_all()
except ImportError as e:
# 建议打印错误,防止因为文件名拼写错误导致静默失败
print(f"⚠️ 模型预加载失败: {e}")
except Exception as e:
print(f"⚠️ 模型预加载发生未知错误: {e}")

View File

@ -0,0 +1,37 @@
# app/api/v1/auth.py
from flask import Blueprint, request, jsonify
from flask_jwt_extended import jwt_required, get_jwt
from app.services.auth_service import AuthService
auth_bp = Blueprint('auth', __name__)
@auth_bp.route('/login', methods=['POST'])
def login():
try:
data = request.get_json()
if not data.get('username') or not data.get('password'):
return jsonify({'msg': '请输入用户名和密码'}), 400
result = AuthService.login(data)
return jsonify({'msg': '登录成功', 'data': result}), 200
except Exception as e:
return jsonify({'msg': str(e)}), 401
# 新增:创建用户 (替代了原来的注册)
@auth_bp.route('/user/create', methods=['POST'])
@jwt_required() # 必须携带 Token
def create_user():
try:
data = request.get_json()
# 从 Token 中获取当前操作人的角色
claims = get_jwt()
operator_role = claims.get('role')
result = AuthService.create_user(data, operator_role)
return jsonify({'msg': '用户创建成功', 'data': result}), 201
except Exception as e:
# 这里虽然返回 400但实际可能包含 403 的含义,具体看前端处理
return jsonify({'msg': str(e)}), 400

View File

@ -0,0 +1,8 @@
from flask import Blueprint, jsonify
# 定义蓝图,名字叫 'transactions'
trans_bp = Blueprint('transactions', __name__)
@trans_bp.route('/test', methods=['GET'])
def test_transaction():
return jsonify({"message": "Transaction module is working"})

View File

@ -1,8 +1,28 @@
# 文件路径: app/extensions.py
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from flask_cors import CORS # 解决前后端跨域问题
from flask_cors import CORS
from flask_jwt_extended import JWTManager # 确保引入了 JWTManager
# 1. 创建扩展实例(此时未绑定具体的 App
db = SQLAlchemy()
migrate = Migrate()
cors = CORS()
cors = CORS()
jwt = JWTManager() # 必须实例化
# 2. 定义初始化函数 (供工厂函数 create_app 调用)
def init_extensions(app):
"""
统一初始化所有 Flask 扩展
"""
# 初始化数据库
db.init_app(app)
# 初始化迁移工具
migrate.init_app(app, db)
# 初始化跨域设置 (允许 /api/* 路径被所有来源访问)
cors.init_app(app, resources={r"/api/*": {"origins": "*"}})
# 初始化 JWT (这一步至关重要,缺少它会导致 500 错误)
jwt.init_app(app)

View File

@ -0,0 +1,62 @@
# app/models/system.py
from app.extensions import db
from werkzeug.security import generate_password_hash, check_password_hash
from datetime import datetime
class SysUser(db.Model):
__tablename__ = 'sys_user'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(100), nullable=False)
email = db.Column(db.String(100), unique=True)
department = db.Column(db.String(100))
role = db.Column(db.String(50))
status = db.Column(db.String(20), default='active')
password_hash = db.Column(db.Text)
def set_password(self, password):
"""生成加密密码"""
self.password_hash = generate_password_hash(password)
def check_password(self, password):
"""验证密码"""
return check_password_hash(self.password_hash, password)
def to_dict(self):
"""序列化为字典,供接口返回使用"""
return {
'id': self.id,
'username': self.username,
'email': self.email,
'department': self.department,
'role': self.role,
'status': self.status
}
class SysLog(db.Model):
"""
系统操作日志表
对应数据库表: sys_log
"""
__tablename__ = 'sys_log'
id = db.Column(db.Integer, primary_key=True)
op_time = db.Column(db.DateTime, default=datetime.now)
op_user_name = db.Column(db.String(100))
op_user_id = db.Column(db.String(50))
module_name = db.Column(db.String(100))
action_type = db.Column(db.String(50))
target_table = db.Column(db.String(100))
target_id = db.Column(db.Integer)
description = db.Column(db.Text)
ip_address = db.Column(db.String(50))
def to_dict(self):
return {
'id': self.id,
'op_time': self.op_time.isoformat() if self.op_time else None,
'op_user_name': self.op_user_name,
'module_name': self.module_name,
'action_type': self.action_type,
'description': self.description
}

View File

@ -0,0 +1,66 @@
from app.extensions import db
from datetime import datetime
# 1. 借用表
class TransBorrow(db.Model):
__tablename__ = 'trans_borrow'
id = db.Column(db.Integer, primary_key=True)
sku = db.Column(db.String(100))
source_table = db.Column(db.String(50))
stock_id = db.Column(db.Integer)
quantity = db.Column(db.Numeric(19, 4))
borrow_time = db.Column(db.DateTime, default=datetime.now)
expected_return_time = db.Column(db.DateTime)
borrower_name = db.Column(db.String(100))
actual_return_time = db.Column(db.DateTime)
approver_name = db.Column(db.String(100))
status = db.Column(db.String(20))
def to_dict(self):
return {
'id': self.id,
'sku': self.sku,
'borrower_name': self.borrower_name,
'status': self.status
}
# 2. 维修表
class TransRepair(db.Model):
__tablename__ = 'trans_repair'
id = db.Column(db.Integer, primary_key=True)
sku = db.Column(db.String(100))
source_table = db.Column(db.String(50))
stock_id = db.Column(db.Integer)
arrival_date = db.Column(db.Date)
expected_repair_time = db.Column(db.String(100))
shipping_date = db.Column(db.Date)
is_self_made = db.Column(db.Boolean, default=False)
related_product_id = db.Column(db.Integer)
related_contract_id = db.Column(db.String(100))
repair_manager = db.Column(db.String(100))
fault_description = db.Column(db.Text)
repair_result = db.Column(db.Text)
cost_price = db.Column(db.Numeric(19, 4))
sale_price = db.Column(db.Numeric(19, 4))
def to_dict(self):
return {'id': self.id, 'sku': self.sku, 'status': 'repaired' if self.repair_result else 'pending'}
# 3. 报废表
class TransScrap(db.Model):
__tablename__ = 'trans_scrap'
id = db.Column(db.Integer, primary_key=True)
sku = db.Column(db.String(100))
source_table = db.Column(db.String(50))
stock_id = db.Column(db.Integer)
quantity = db.Column(db.Numeric(19, 4))
reason = db.Column(db.Text)
operator_name = db.Column(db.String(100))
operation_time = db.Column(db.DateTime, default=datetime.now)
approver_name = db.Column(db.String(100))
approval_status = db.Column(db.String(20))
cost_at_scrap = db.Column(db.Numeric(19, 4))
total_loss = db.Column(db.Numeric(19, 4))
def to_dict(self):
return {'id': self.id, 'sku': self.sku, 'total_loss': float(self.total_loss) if self.total_loss else 0}

View File

@ -0,0 +1,95 @@
# app/services/auth_service.py
from app.models.system import SysUser
from app.extensions import db
from flask_jwt_extended import create_access_token, get_jwt_identity, get_jwt
from werkzeug.security import check_password_hash
from app.utils.constants import UserRole
class AuthService:
# 硬编码的超级管理员凭证
SUPER_ADMIN_USER = "IRIS"
SUPER_ADMIN_PASS = "licahk"
@staticmethod
def login(data):
username = data.get('username')
password = data.get('password')
user_role = None
user_id = None
user_info = {}
# 1. 优先检查硬编码的超级管理员
if username == AuthService.SUPER_ADMIN_USER:
if password == AuthService.SUPER_ADMIN_PASS:
user_role = UserRole.SUPER_ADMIN
user_id = 0 # 虚拟ID
user_info = {
'username': username,
'role': user_role,
'department': 'System'
}
else:
raise Exception("密码错误")
# 2. 如果不是 IRIS检查数据库用户
else:
user = SysUser.query.filter_by(username=username).first()
if not user or not user.check_password(password):
raise Exception("用户名或密码错误")
if user.status != 'active':
raise Exception("账号已被禁用")
user_role = user.role
user_id = user.id
user_info = user.to_dict()
# 3. 生成 Token将角色写入 claims (关键步骤:用于后期权限控制)
# identity 存 IDadditional_claims 存角色
access_token = create_access_token(
identity=user_id,
additional_claims={'role': user_role, 'username': username}
)
return {
'access_token': access_token,
'user': user_info
}
@staticmethod
def create_user(data, operator_role):
"""
创建新用户 (仅限管理员使用)
:param data: 新用户数据
:param operator_role: 当前操作人的角色 (从 Token 获取)
"""
# 简单权限控制:只有超级管理员或主管可以创建用户
if operator_role not in [UserRole.SUPER_ADMIN, UserRole.SUPERVISOR]:
raise Exception("权限不足:只有超级管理员或主管可以创建新用户")
# 检查重名
if SysUser.query.filter_by(username=data.get('username')).first():
raise Exception("用户名已存在")
# 默认角色处理
role = data.get('role')
# 验证角色是否合法
valid_roles = [v for k, v in UserRole.__dict__.items() if not k.startswith('__')]
if role not in valid_roles:
raise Exception(f"角色无效,可选角色: {valid_roles}")
new_user = SysUser(
username=data.get('username'),
email=data.get('email', ''), # 允许为空
department=data.get('department', ''),
role=role,
status='active'
)
new_user.set_password(data.get('password'))
db.session.add(new_user)
db.session.commit()
return new_user.to_dict()

View File

@ -0,0 +1,23 @@
# app/utils/constants.py
class UserRole:
SUPER_ADMIN = 'super_admin' # 超级管理员 (IRIS)
SUPERVISOR = 'supervisor' # 主管
FINANCE = 'finance' # 财务
WAREHOUSE_MGR = 'warehouse_manager' # 库管
INBOUND = 'inbound' # 入库员
OUTBOUND = 'outbound' # 出库员
PURCHASER = 'purchaser' # 采购员
SALES = 'sales' # 销售
# 角色中文映射(用于前端展示或日志)
ROLE_MAP = {
SUPER_ADMIN: '超级管理员',
SUPERVISOR: '主管',
FINANCE: '财务',
WAREHOUSE_MGR: '库管',
INBOUND: '入库员',
OUTBOUND: '出库员',
PURCHASER: '采购员',
SALES: '销售'
}

View File

@ -0,0 +1,30 @@
# app/utils/decorators.py
from functools import wraps
from flask_jwt_extended import get_jwt
from flask import jsonify
def role_required(*roles):
"""
自定义装饰器:检查用户角色
使用方法: @role_required('super_admin', 'finance')
"""
def wrapper(fn):
@wraps(fn)
def decorator(*args, **kwargs):
claims = get_jwt()
user_role = claims.get('role')
# 如果是超级管理员,拥有上帝视角,直接放行 (可选)
if user_role == 'super_admin':
return fn(*args, **kwargs)
if user_role not in roles:
return jsonify(msg='权限不足:您没有访问此资源的权限'), 403
return fn(*args, **kwargs)
return decorator
return wrapper

View File

@ -1,16 +1,43 @@
import os
from datetime import timedelta
class Config:
# 【核心修改】
# 优先读取 Docker 传入的 'DATABASE_URL' 环境变量。
# 如果读不到(比如你在非 Docker 环境下本地直接运行),才回退使用 'localhost'。
# =========================================================
# 1. 基础路径与安全配置
# =========================================================
# 获取当前文件所在目录的绝对路径 (用于定位 uploads 文件夹等)
BASE_DIR = os.path.abspath(os.path.dirname(__file__))
# Flask 的基础密钥 (用于 Session, Flash 消息等安全签名)
SECRET_KEY = os.getenv('SECRET_KEY', 'dev-secret-key-1234')
# =========================================================
# 2. 数据库配置
# =========================================================
# 优先读取 .env 中的 'DATABASE_URL'。
# 如果读不到,才回退使用默认的 localhost 连接字符串。
SQLALCHEMY_DATABASE_URI = os.getenv(
'DATABASE_URL',
'postgresql://test:1234@localhost:5432/inventory_system'
'postgresql://postgres:1234@localhost:5432/inventory_system'
)
# 关闭 SQLAlchemy 的事件追踪,减少内存消耗
# 关闭 SQLAlchemy 的事件追踪,减少内存消耗 (推荐设为 False)
SQLALCHEMY_TRACK_MODIFICATIONS = False
# Flask 的密钥
SECRET_KEY = 'dev-secret-key-1234'
# =========================================================
# 3. JWT 配置 (修复 500 报错的核心区域)
# =========================================================
# 【核心】必须设置 JWT_SECRET_KEY否则 create_access_token 会报错
# 逻辑:优先读环境变量,读不到就用默认字符串
JWT_SECRET_KEY = os.getenv('JWT_SECRET_KEY', 'default-jwt-secret-key-if-missing')
# 设置 Token 过期时间 (这里设为 1 天)
JWT_ACCESS_TOKEN_EXPIRES = timedelta(days=1)
# =========================================================
# 4. 文件上传配置
# =========================================================
# 上传文件存储路径
UPLOAD_FOLDER = os.path.join(BASE_DIR, 'uploads')
# 限制最大上传 16MB
MAX_CONTENT_LENGTH = 16 * 1024 * 1024

View File

@ -7,4 +7,6 @@ psycopg2-binary==2.9.9
python-dotenv==1.0.0
flask-cors==4.0.0
Pillow>=10.0.0
python-barcode>=0.14.0
python-barcode>=0.14.0
# [新增] 必须添加,用于处理 token 登录
Flask-JWT-Extended==4.6.0

View File

@ -1,12 +1,14 @@
# 文件路径: run.py (在项目根目录下,与 config.py 同级)
# inventory-backend/run.py
from app import create_app
# 【关键】这一行必须在最外层,不能放在 if __name__ ... 里面!
# Gunicorn 会导入这个变量
app = create_app()
if __name__ == '__main__':
# debug=True 修改代码后会自动重启
# 这里是开发调试用的Docker/Gunicorn 不会执行这里
print("\n====== 当前所有注册路由 ======")
for rule in app.url_map.iter_rules():
print(f"{rule} -> {rule.endpoint}")
print("==============================\n")
app.run(host='0.0.0.0', port=5000, debug=True)
app.run(host='0.0.0.0', port=8000, debug=True)

View File

@ -0,0 +1,31 @@
import request from '@/utils/request'
// 登录 (兼容 IRIS 超级管理员和普通用户)
export function login(data: any) {
return request({
// 【修改】去掉开头的 /api因为 request.ts 的 baseURL 已经包含了 /api
// 最终请求地址会自动拼接为:/api/v1/auth/login
url: '/v1/auth/login',
method: 'post',
data
})
}
// 创建用户 (管理员专用接口)
export function createUser(data: any) {
return request({
// 【修改】去掉开头的 /api
url: '/v1/auth/user/create',
method: 'post',
data
})
}
// 获取用户信息 (用于页面刷新后拉取最新权限)
export function getUserInfo() {
return request({
// 【修改】去掉开头的 /api
url: '/v1/auth/me',
method: 'get'
})
}

View File

@ -1,10 +1,11 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia' // [新增] 引入 Pinia
import App from './App.vue'
// 1. 引入路由配置 (确保你已经创建了 src/router/index.ts)
// 1. 引入路由配置
import router from './router'
// 2. 引入 Element Plus (UI组件库)
// 2. 引入 Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入中文包
@ -13,17 +14,31 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
// 3. 引入图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// 4. 引入全局样式 (通常建议加上,如果没有可忽略)
import './style.css'
const app = createApp(App)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// =========================================================
// [关键修复] 注册顺序非常重要!
// 1. 必须先注册 Pinia因为 Router 的守卫中会用到 Store
// =========================================================
const pinia = createPinia()
app.use(pinia)
// 使用插件
// =========================================================
// 2. 然后注册 Router
// =========================================================
app.use(router)
// 3. 注册 Element Plus
app.use(ElementPlus, {
locale: zhCn, // 设置为中文
})
// 4. 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')

View File

@ -1,9 +1,18 @@
import { createRouter, createWebHistory } from 'vue-router'
// 核心修改点:使用 'type' 关键字导入 RouteRecordRaw,或者将其分开导入
// 使用 'type' 关键字导入 RouteRecordRaw
import type { RouteRecordRaw } from 'vue-router'
import Layout from '@/layout/index.vue'
import { useUserStore } from '@/stores/user' // [新增] 引入 Store 用于权限判断
const routes: Array<RouteRecordRaw> = [
// [新增] 登录页 (不需要 Layout)
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
meta: { hidden: true } // 不在侧边栏显示
},
// 1. 首页 Dashboard
{
path: '/',
@ -104,7 +113,35 @@ const routes: Array<RouteRecordRaw> = [
]
},
/* * 暂时屏蔽 BOM 和 系统管理
// 5. [修改] 系统管理 (权限控制 + 用户创建)
{
path: '/system',
component: Layout,
meta: {
title: '系统管理',
icon: 'Setting',
// 只有超级管理员和主管能看到此菜单
roles: ['super_admin', 'supervisor']
},
children: [
{
path: 'user-create',
name: 'UserCreate',
// 指向我们之前创建的新增用户页面
component: () => import('@/views/system/UserCreate.vue'),
meta: { title: '账号开通', icon: 'User' }
},
// 原有的日志页面保留 (如果文件存在)
// {
// path: 'log',
// name: 'OpLog',
// component: () => import('@/views/system/log.vue'),
// meta: { title: '操作日志', icon: 'Document' }
// }
]
},
/* * 暂时屏蔽 BOM
*/
// {
// path: '/bom',
@ -118,25 +155,6 @@ const routes: Array<RouteRecordRaw> = [
// }
// ]
// },
// {
// path: '/system',
// component: Layout,
// meta: { title: '系统管理', icon: 'Setting' },
// children: [
// {
// path: 'user',
// name: 'UserManage',
// component: () => import('@/views/system/user.vue'),
// meta: { title: '用户管理', icon: 'User' }
// },
// {
// path: 'log',
// name: 'OpLog',
// component: () => import('@/views/system/log.vue'),
// meta: { title: '操作日志', icon: 'Document' }
// }
// ]
// },
// 404 路由
{
@ -151,4 +169,40 @@ const router = createRouter({
routes
})
// ==========================================
// [新增] 全局路由守卫:处理登录拦截与权限验证
// ==========================================
router.beforeEach((to, from, next) => {
const userStore = useUserStore()
const token = userStore.token
const userRole = userStore.role
// 1. 白名单:如果是去登录页,直接放行
if (to.path === '/login') {
next()
return
}
// 2. 无 Token强制跳转登录页
if (!token) {
next('/login')
return
}
// 3. 权限判断:检查 meta.roles
if (to.meta.roles && Array.isArray(to.meta.roles)) {
// 如果当前用户角色在允许列表中,放行
if (to.meta.roles.includes(userRole)) {
next()
} else {
// 权限不足,重定向到首页或 403 页面 (这里简单跳回 dashboard)
// 可以在这里触发一个 Element Plus 的 Message 提示
next('/dashboard')
}
} else {
// 没有定义权限要求的页面,默认放行
next()
}
})
export default router

View File

@ -0,0 +1,46 @@
import { defineStore } from 'pinia'
import { login } from '@/api/auth'
import { ref } from 'vue'
export const useUserStore = defineStore('user', () => {
const token = ref(localStorage.getItem('token') || '')
const role = ref(localStorage.getItem('role') || '') // 持久化角色
const username = ref(localStorage.getItem('username') || '')
const handleLogin = async (loginForm: any) => {
try {
const res = await login(loginForm)
// res.data 结构: { access_token, user: { role, username, ... } }
const data = res.data
token.value = data.access_token
role.value = data.user.role
username.value = data.user.username
// 持久化存储 (简单处理生产环境建议加密或仅存Token)
localStorage.setItem('token', data.access_token)
localStorage.setItem('role', data.user.role)
localStorage.setItem('username', data.user.username)
return true
} catch (error) {
console.error(error)
return false
}
}
const logout = () => {
token.value = ''
role.value = ''
username.value = ''
localStorage.clear()
window.location.reload()
}
// 辅助函数:判断当前用户是否拥有某些角色
const hasRole = (roles: string[]) => {
return roles.includes(role.value)
}
return { token, role, username, handleLogin, logout, hasRole }
})

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
</template>
<style scoped>
</style>

View File

@ -1,21 +1,28 @@
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user' // 引入 Store 获取 Token
// 1. 创建 axios 实例
const service = axios.create({
// 【修改这里】不要写死 '/api/v1',改为读取环境变量
baseURL: import.meta.env.VITE_API_BASE_URL,
// 【关键修改】
// 设置为 '/api',请求会自动拼接成 http://localhost:5173/api/...
// 然后被 Vite 代理转发到 http://127.0.0.1:8000/api/...
baseURL: '/api',
timeout: 5000
})
// 2. 请求拦截器 (可以在这里加 Token)
// 2. 请求拦截器
service.interceptors.request.use(
(config) => {
// 如果以后有登录 token就在这里加
// const token = localStorage.getItem('token')
// if (token) {
// config.headers['Authorization'] = 'Bearer ' + token
// }
// 在发送请求之前做些什么
// 注意:这里需要确保 Pinia 已经初始化,但在拦截器运行时组件早已加载,通常没问题
// 为了安全起见,也可以直接读 localStorage或者在函数内调用 store
const token = localStorage.getItem('token')
if (token && config.headers) {
// Flask-JWT-Extended 默认需要 'Bearer <token>' 格式
config.headers['Authorization'] = 'Bearer ' + token
}
return config
},
(error) => {
@ -23,25 +30,52 @@ service.interceptors.request.use(
}
)
// 3. 响应拦截器 (统一处理错误)
// 3. 响应拦截器
service.interceptors.response.use(
(response) => {
// Axios 默认包了一层 data所以这里取 response.data
const res = response.data
// 这里可以根据后端的 code 来判断
// 假设你的后端成功返回 code: 200
// 如果后端返回的是标准 Flask jsonify 结果,通常没有 code 字段(除非你自己封装了)
// 如果你使用了标准 HTTP 状态码200, 201等Axios 会直接进入这里
// 只有当业务逻辑明确返回错误码时才报错 (根据你的后端封装调整)
if (res.code && res.code !== 200) {
ElMessage.error(res.msg || 'Error')
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res // 直接返回数据部分
return res // 返回解包后的数据
}
},
(error) => {
console.log('err' + error)
ElMessage.error(error.message || '请求失败')
console.log('err: ' + error) // for debug
let message = error.message || '请求失败'
// 处理 HTTP 状态码错误
if (error.response) {
const status = error.response.status
const data = error.response.data
if (status === 401) {
message = '登录已过期,请重新登录'
// 这里可以触发登出逻辑
localStorage.clear()
window.location.href = '/login'
} else if (status === 403) {
message = '权限不足'
} else if (status === 404) {
message = '请求的资源不存在'
} else if (status === 500) {
message = '服务器内部错误'
} else if (data && data.msg) {
// 优先显示后端返回的错误信息
message = data.msg
}
}
ElMessage.error(message)
return Promise.reject(error)
}
)
// 4. 【关键】必须默认导出 service
export default service

View File

@ -1,11 +1,106 @@
<script setup lang="ts">
</script>
<template>
<div class="login-container">
<el-card class="login-card">
<template #header>
<div class="card-header">
<h2>Inventory System</h2>
</div>
</template>
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginRules"
size="large"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入用户名 (如: IRIS)"
:prefix-icon="User"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
:prefix-icon="Lock"
show-password
@keyup.enter="onLogin"
/>
</el-form-item>
<el-button type="primary" :loading="loading" class="w-100" @click="onLogin">
立即登录
</el-button>
<div class="tips">
<p>默认超级管理员: IRIS / licahk</p>
</div>
</el-form>
</el-card>
</div>
</template>
<style scoped>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const loginFormRef = ref()
const loginForm = reactive({ username: '', password: '' })
const loginRules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
const onLogin = async () => {
if (!loginFormRef.value) return
await loginFormRef.value.validate(async (valid: boolean) => {
if (valid) {
loading.value = true
const success = await userStore.handleLogin(loginForm)
loading.value = false
if (success) {
ElMessage.success('登录成功')
router.push('/dashboard') // 登录后跳转首页
}
}
})
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2d3a4b; /* 深色背景 */
}
.login-card {
width: 400px;
}
.card-header h2 {
text-align: center;
margin: 0;
color: #333;
}
.w-100 {
width: 100%;
}
.tips {
margin-top: 15px;
font-size: 12px;
color: #999;
text-align: center;
}
</style>

View File

@ -0,0 +1,118 @@
<template>
<div class="app-container">
<el-card>
<template #header>
<div class="card-header">
<span>新增员工账号</span>
</div>
</template>
<el-form
ref="formRef"
:model="form"
:rules="rules"
label-width="100px"
style="max-width: 600px"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="登录账号 (英文)" />
</el-form-item>
<el-form-item label="初始密码" prop="password">
<el-input v-model="form.password" type="password" show-password placeholder="设置初始密码" />
</el-form-item>
<el-form-item label="所属部门" prop="department">
<el-select v-model="form.department" placeholder="请选择部门" style="width: 100%">
<el-option label="总经办" value="Management" />
<el-option label="财务部" value="Finance" />
<el-option label="仓储部" value="Warehouse" />
<el-option label="采购部" value="Procurement" />
<el-option label="销售部" value="Sales" />
</el-select>
</el-form-item>
<el-form-item label="系统角色" prop="role">
<el-select v-model="form.role" placeholder="授予权限" style="width: 100%">
<el-option label="主管 (Supervisor)" value="supervisor" />
<el-option label="财务 (Finance)" value="finance" />
<el-option label="库管 (Warehouse Mgr)" value="warehouse_manager" />
<el-option label="入库员 (Inbound)" value="inbound" />
<el-option label="出库员 (Outbound)" value="outbound" />
<el-option label="采购员 (Purchaser)" value="purchaser" />
<el-option label="销售 (Sales)" value="sales" />
</el-select>
<div class="form-tip">注意超级管理员无法通过此界面创建请联系开发人员</div>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="可选填" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit" :loading="loading">创建账号</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { createUser } from '@/api/auth'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const formRef = ref()
const form = reactive({
username: '',
password: '',
department: '',
role: '',
email: ''
})
const rules = {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码至少6位', trigger: 'blur' }],
role: [{ required: true, message: '请选择角色', trigger: 'change' }],
department: [{ required: true, message: '请选择部门', trigger: 'change' }]
}
const onSubmit = async () => {
if (!formRef.value) return
await formRef.value.validate(async (valid: boolean) => {
if (valid) {
loading.value = true
try {
await createUser(form)
ElMessage.success(`用户 ${form.username} 创建成功!`)
resetForm()
} catch (error) {
// 错误已被拦截器处理
} finally {
loading.value = false
}
}
})
}
const resetForm = () => {
if (!formRef.value) return
formRef.value.resetFields()
}
</script>
<style scoped>
.app-container {
padding: 20px;
}
.form-tip {
font-size: 12px;
color: #e6a23c;
line-height: 1.5;
margin-top: 5px;
}
</style>

View File

@ -10,20 +10,23 @@ export default defineConfig({
}
},
server: {
// 【关键修改1】必须设置为 0.0.0.0,否则容器外无法访问
// 允许局域网访问前端页面
host: '0.0.0.0',
// 【关键修改2】显式指定端口与 docker-compose 映射保持一致
port: 5173,
proxy: {
// 拦截所有以 /api 开头的请求
'/api': {
// 【关键修改3
// 1. 'backend' 是 docker-compose.yml 里的服务名
// 2. 端口改为 8000 (Gunicorn 配置的端口)
target: 'http://backend:8000',
// 【关键修改】
// 你的截图显示后端容器名叫 inventory_api
// 在 Docker 内部,直接用这个名字作为域名,就能找到它
target: 'http://inventory_api:8000',
changeOrigin: true,
// 注意:如果你的 Flask 路由代码里没有写 /api 前缀(例如 @app.route('/login')
// 那么你需要取消下面这行的注释,把 /api 去掉,否则后端会收到 /api/login 报 404
rewrite: (path) => path.replace(/^\/api/, '')
// 【保持注释】
// 通常 Flask 后端都会把路由写全 (如 /api/v1/auth/login)
// 所以这里不需要 rewrite 去掉 /api直接原样转发过去最稳妥
// rewrite: (path) => path.replace(/^\/api/, '')
}
}
}