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>
|