9.8 登录流程

:::tip 概述本节说明前端登录流程的实现，包括登录表单提交、Token 存储、路由守卫和登出处理。 :::

前端登录流程

1. 用户输入用户名、密码、验证码
2. 调用 POST /api/login 接口
3. 成功 → 存储 Token 到 localStorage
4. 路由守卫检测到 Token → 获取用户信息
5. 生成动态路由 → 跳转首页

登录页面代码

来自 ui/src/views/login/LoginForm.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 存储

// 登录成功后存储
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');
}

4.0 KiB Raw Blame History

9.8 登录流程

前端登录流程

登录页面代码

Token 存储

4.0 KiB

Raw Blame History