超级管理员登录设置
This commit is contained in:
@ -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'
|
||||
})
|
||||
}
|
||||
@ -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')
|
||||
@ -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
|
||||
46
inventory-web/src/stores/user.ts
Normal file
46
inventory-web/src/stores/user.ts
Normal 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 }
|
||||
})
|
||||
@ -1,11 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -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
|
||||
@ -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>
|
||||
118
inventory-web/src/views/system/UserCreate.vue
Normal file
118
inventory-web/src/views/system/UserCreate.vue
Normal 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>
|
||||
@ -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/, '')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user