用户认证与访问控制

Login.vue 承担了系统的安全门户职责。它不仅负责前端表单的原子级校验，还处理了后端返回的 JWT (JSON Web Token) 存储，并根据用户角色的 is_admin 字段执行不同的路由分发策略。

---

🔐 认证工作流

组件在单一视图内通过 isLogin 状态实现登录与注册逻辑的平滑切换。

✨ 业务架构

核心安全特性

JWT 持久化

登录成功后将 access_token 写入 localStorage，作为后续 API 请求的 Authorization 凭证。

角色路由分发

自动识别 user.is_admin 标志位，管理员强制重定向至 /admin 后台，普通用户则通过 emit 通知主页刷新。

表单原子校验

集成密码长度截断检查与正则表达式邮箱格式校验，减少无效的后端请求开销。

认证生命周期

1. 模式选择：切换 isLogin 状态，动态调整表单字段渲染（如注册模式下展示学校、邮箱）。
2. 预检校验：执行本地客户端校验（密码 > 6位，邮箱格式等）。
3. 通信交互：通过 axios 向 /auth/login 或 /auth/register 发起异步请求。
4. 令牌存储：解析响应体，持久化用户信息与认证令牌。
5. 权限跳转：根据角色权限执行路由分发或组件事件上报。

💻 源码逻辑分析

关键逻辑实现

1. 响应式表单管理 (Reactive Object)

/**
 * @description 统一表单状态管理，确保与后端 User 模型字段严格映射
 */
const form = reactive({
  username: '',
  password: '',
  real_name: '', // 对应后端映射名
  email: '',
  school: ''
});

2. 提交处理程序 (handleSubmit)

/**
 * @description 处理认证请求的核心控制器
 */
const handleSubmit = async () => {
  // Step 1: 客户端防御性编程，减少服务器压力
  if (form.password.length < 6) {
    Swal.fire({ icon: 'warning', text: 'Password must be at least 6 characters.' });
    return;
  }

  // Step 2: 动态 Endpoint 选择
  const endpoint = isLogin.value ? '/auth/login' : '/auth/register';
  loading.value = true;

  try {
    const response = await axios.post(endpoint, form);

    if (isLogin.value) {
      handleLoginSuccess(response.data);
    } else {
      handleRegisterSuccess();
    }
  } catch (error: any) {
    handleAuthError(error);
  } finally {
    loading.value = false;
  }
};

3. 令牌存储与权限重定向

/**
 * @description 处理登录成功后的凭证持久化与路由跳转
 */
const handleLoginSuccess = (data: any) => {
  const { access_token, user } = data;

  // 持久化存储，键名：cpd_token
  localStorage.setItem('cpd_token', access_token);
  localStorage.setItem('cpd_user_info', JSON.stringify(user));

  if (user.is_admin) {
    // 管理员重定向
    router.push('/admin');
  } else {
    // 普通用户回调
    emit('login-success');
  }
};

Tip

技术细节：组件使用 loading 状态锁定了提交按钮，有效防止了弱网环境下的表单重复提交（Idempotency 保护）。

---

🔌 通讯协议 (API Interface)

请求载荷 (POST)

字段名	类型	必填	说明
username	string	是	用户唯一标识
password	string	是	原始密码字符串
real_name	string	仅注册	真实姓名，用于报表抬头
email	string	仅注册	符合正则规则的邮箱

响应结构 (Login)

{
  "access_token": "eyJhbGciOiJIUzI1NiI...",
  "user": {
    "username": "admin",
    "is_admin": true
  }
}