9.8 登录流程

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

前端登录流程

1. 用户输入用户名、密码、验证码
2. 调用 POST /api/login 接口（参数：username / password / key / code）
3. 成功 → 存储 access_token 到 localStorage（键名 ACCESS-TOKEN，仅存访问令牌）
4. 路由守卫检测到 Token → 获取用户信息（GET /api/index/getUser）
5. 生成动态路由 → 跳转首页

登录页面代码

<!-- ui/src/views/login/LoginForm.vue（节选，来自项目实际代码） -->
<template>
  <n-form
    ref="formRef"
    :model="formInline"
    :rules="rules"
    :show-label="false"
    size="large"
  >
    <n-form-item path="username">
      <n-input v-model:value="formInline.username" placeholder="请输入登录账号" />
    </n-form-item>
    <n-form-item path="password">
      <n-input
        v-model:value="formInline.password"
        type="password"
        show-password-on="mousedown"
        placeholder="请输入登录密码"
        @keyup.enter="handleSubmit"
      />
    </n-form-item>
    <n-form-item path="code">
      <div style="display: flex">
        <n-input
          v-model:value.trim="formInline.code"
          placeholder="验证码"
          @keyup.enter="handleSubmit"
        />
        <img
          style="width: 108px; height: 40px; margin-left: 8px; cursor: pointer"
          @click="getCaptcha"
          v-if="captchaImg"
          :src="captchaImg"
        />
      </div>
    </n-form-item>

    <n-form-item>
      <n-button
        class="w-full"
        type="primary"
        size="large"
        :loading="loading"
        @click="handleSubmit"
      >
        登录
      </n-button>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user';
import { FormRules, useMessage } from 'naive-ui';
import { getInfoCaptcha } from '@/api/common/user';

const message = useMessage();
const router = useRouter();
const userStore = useUserStore();
const formInline = reactive({ username: '', password: '', code: '', key: '' });
const captchaImg = ref('');

// 获取验证码
// 响应字段：key = 验证码标识，captcha = Base64 图片
const getCaptcha = async () => {
  const res = await getInfoCaptcha();
  formInline.key = res.key;
  captchaImg.value = res.captcha;
};

// 登录（校验通过后提交，成功跳转首页）
const handleSubmit = () => {
  formRef.value?.validate().then(async () => {
    loading.value = true;
    try {
      const { code } = await userStore.login(formInline);
      if (code == 0) router.push('/');
    } finally {
      loading.value = false;
    }
  });
};
</script>

:::warning 字段命名约定（与后端一致）

验证码接口 /api/captcha 返回 key + captcha（不是 image）
登录接口 /api/login 接收 key + code（不是 captchaKey / captchaCode）
登录响应 data 为 access_token / refresh_token（snake_case，登录接口 raw 返回，见 8.6 Token 使用说明）
登录失败（含验证码错误）应刷新验证码并清空输入 :::

完整登录示例（含失败处理）

import { useMessage } from 'naive-ui';

const message = useMessage();
const loading = ref(false);

const handleSubmit = async () => {
  await formRef.value.validate();
  loading.value = true;

  try {
    const { code } = await userStore.login(formInline);
    if (code == 0) {
      message.success('登录成功');
      router.push('/');
    }
  } catch (e: any) {
    // 登录失败（验证码错误/密码错误等），刷新验证码
    message.error(e.message || '登录失败');
    getCaptcha();
    formInline.code = '';
  } finally {
    loading.value = false;
  }
};

刷新验证码的时机

时机	说明
页面加载时	`onMounted` 自动获取
点击图片时	用户手动刷新
登录失败后	一次性已消费，自动刷新并清空输入
超过 5 分钟	验证码过期（`CAPTCHA_EXPIRE=300`），用户点击刷新

Token 存储

// 登录成功后存储（摘自 ui/src/store/modules/user.ts，仅存 access_token）
const ex = 7 * 24 * 60 * 60 * 1000;
storage.set(ACCESS_TOKEN, data.access_token, ex);   // 键名 'ACCESS-TOKEN'

// 请求拦截器自动携带（ui/src/utils/http/axios/index.ts）
config.headers['Authorization'] = `Bearer ${storage.get('ACCESS-TOKEN', '')}`;

// 响应拦截器检测 401 → 弹窗提示 → 清存储 → 跳转登录页
// （本项目未内置自动续签，见 8.6 Token 使用说明）

登出

// userStore.logout()：POST /api/logout（携带 access_token）
// 后端同时执行 revokeToken()（吊销 refresh_token，Redis jti 删除）
// 前端 storage.remove(ACCESS_TOKEN) / remove(CURRENT_USER) / storage.clear() → 跳转登录页

:::tip 登出必须调接口本项目 refresh_token 存 Redis（有状态）——必须调用 /api/logout 才能让服务端令牌即时失效；仅清前端 localStorage 的话，旧 refresh_token 在 7 天内仍可用于续签。 :::

常见问题

现象	原因	处理
登录提示验证码错误	字段名不符（key/code）或已过期	按约定传参；失败后刷新验证码
登录成功但刷新页面回到登录页	Token 未正确存入 Storage	检查 `storage.set` 与拦截器读取键名
登录接口 500	后端 Redis 未启动 / JWT_SECRET 异常	见 2.9 常见问题 FAQ
登录后菜单空白	用户无角色	角色管理分配菜单（见 9.5 路由与动态菜单）

5.8 KiB Raw Blame History Unescape Escape