152 lines
4.0 KiB
Markdown
152 lines
4.0 KiB
Markdown
# 9.8 登录流程
|
|
|
|
:::tip 概述
|
|
本节说明前端登录流程的实现，包括登录表单提交、Token 存储、路由守卫和登出处理。
|
|
:::
|
|
|
|
## 前端登录流程
|
|
|
|
```text
|
|
1. 用户输入用户名、密码、验证码
|
|
2. 调用 POST /api/login 接口
|
|
3. 成功 → 存储 Token 到 localStorage
|
|
4. 路由守卫检测到 Token → 获取用户信息
|
|
5. 生成动态路由 → 跳转首页
|
|
```
|
|
|
|
## 登录页面代码
|
|
|
|
来自 `ui/src/views/login/LoginForm.vue`（简化）：
|
|
|
|
```vue
|
|
<!-- src/views/login/LoginForm.vue -->
|
|
<template>
|
|
<a-form
|
|
ref="formRef"
|
|
:show-label="false"
|
|
size="large"
|
|
:model="formInline"
|
|
:rules="rules"
|
|
>
|
|
<a-form-item name="username">
|
|
<a-input v-model:value="formInline.username" placeholder="请输入登录账号">
|
|
<template #prefix>
|
|
<UserOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="password">
|
|
<a-input-password
|
|
v-model:value="formInline.password"
|
|
placeholder="请输入登录密码"
|
|
@keyup.enter="handleSubmit"
|
|
>
|
|
<template #prefix>
|
|
<LockOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
<a-form-item name="code">
|
|
<div style="display: flex">
|
|
<a-input
|
|
@keyup.enter="handleSubmit"
|
|
v-model:value.trim="formInline.code"
|
|
placeholder="验证码"
|
|
>
|
|
<template #prefix>
|
|
<SafetyCertificateOutlined style="color: #808695; font-size: 18px" />
|
|
</template>
|
|
</a-input>
|
|
<img
|
|
style="width: 108px; height: 40px; border-radius: 4px; margin-left: 8px; cursor: pointer"
|
|
@click="getCaptcha"
|
|
v-if="captchaImg"
|
|
:src="captchaImg"
|
|
/>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
<a-form-item>
|
|
<a-button class="w-full" type="primary" size="large" :loading="loading" @click="handleSubmit">
|
|
登录
|
|
</a-button>
|
|
</a-form-item>
|
|
</a-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useUserStore } from '@/store/modules/user';
|
|
import { message } from 'ant-design-vue';
|
|
import { getInfoCaptcha } from '@/api/common/user';
|
|
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons-vue';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
|
|
const formRef = ref();
|
|
const loading = ref(false);
|
|
const captchaImg = ref('');
|
|
|
|
const formInline = reactive({
|
|
username: '',
|
|
password: '',
|
|
code: '',
|
|
key: '',
|
|
});
|
|
|
|
const rules = {
|
|
username: { required: true, message: '请输入登录账号', trigger: 'blur' },
|
|
password: { required: true, message: '请输入登录密码', trigger: 'blur' },
|
|
code: { required: true, message: '请输入验证码', trigger: 'blur' },
|
|
};
|
|
|
|
// 获取验证码
|
|
const getCaptcha = async () => {
|
|
const res = await getInfoCaptcha();
|
|
formInline.key = res.key;
|
|
captchaImg.value = res.captcha; // 返回字段是 captcha
|
|
};
|
|
|
|
// 登录
|
|
const handleSubmit = () => {
|
|
if (!formRef.value) return;
|
|
formRef.value.validate().then(async () => {
|
|
loading.value = true;
|
|
try {
|
|
const { code, msg } = await userStore.login(formInline);
|
|
if (code === 0) {
|
|
message.success('登录成功，即将进入系统');
|
|
const toPath = decodeURIComponent((route.query?.redirect || '/') as string);
|
|
router.replace(toPath);
|
|
} else {
|
|
getCaptcha();
|
|
message.error(msg || '登录失败');
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
};
|
|
|
|
onMounted(() => getCaptcha());
|
|
</script>
|
|
```
|
|
|
|
## Token 存储
|
|
|
|
```typescript
|
|
// 登录成功后存储
|
|
storage.set(ACCESS_TOKEN, data.access_token, 7 * 24 * 60 * 60 * 1000); // 7天过期
|
|
|
|
// 请求拦截器自动携带
|
|
config.headers['Authorization'] = `Bearer ${token}`;
|
|
|
|
// 响应拦截器检测 401
|
|
if (response.data.code === 401) {
|
|
router.push('/login');
|
|
}
|
|
```
|