48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<template>
|
||
<div class="login-box">
|
||
<h2>系统登录</h2>
|
||
<input v-model="form.username" placeholder="用户名" />
|
||
<input v-model="form.password" type="password" placeholder="密码" />
|
||
<button @click="handleLogin">登录</button>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { useUserStore } from '../stores/user'
|
||
import axios from '../api/request' // 导入我们封装的 request
|
||
|
||
const router = useRouter()
|
||
const userStore = useUserStore()
|
||
const form = reactive({ username: '', password: '' })
|
||
|
||
const handleLogin = async () => {
|
||
try {
|
||
// 这里暂时模拟后端返回，等您Flask写好了把下面注释解开
|
||
/*
|
||
const res = await axios.post('/login', form)
|
||
userStore.login(res.data) // res.data 包含 token, username, role
|
||
*/
|
||
|
||
// --- 模拟数据开始 ---
|
||
if(form.username) {
|
||
userStore.login({
|
||
token: 'fake-jwt-token-123',
|
||
username: form.username,
|
||
role: form.username === 'admin' ? 'admin' : 'engineer'
|
||
})
|
||
router.push('/dashboard')
|
||
}
|
||
// --- 模拟数据结束 ---
|
||
|
||
} catch (error) {
|
||
alert('登录失败')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.login-box { width: 300px; margin: 100px auto; display: flex; flex-direction: column; gap: 10px; }
|
||
</style>
|