React JS+Apollo用户登录实践评估及登出Cookie残留问题咨询

现有技术栈 #

• 前端：React JS + Apollo Client
• 后端：Node JS + GraphQL + Apollo Server

当前实现代码 #

后端登录校验逻辑 #

前端通过Login mutation提交邮箱、密码到后端后，执行如下用户合法性校验：

const Login = async (props) => {
  const { prisma, email, password } = props;
  const user = await prisma.Users.findUnique({ where: { email } });
  if (user) {
    const check = CheckPasswords({ currentPassword, storedPassword });
        if (!check) {
            return { status: false, cause: 'password', response: 'Wrong password' };
        } else {
            const token = CreateToken({
                id: target.id,
                email: target.email,
                isAdmin: target.isAdmin,
            });
            return { status: true, response: 'Login successful', token: token }; // THIS IS THE RESPONSE OBJECT
        }
  } else {
        return { status: false, response: 'E-mail does not exist' };
  }
};

校验通过后生成包含用户ID、邮箱、isAdmin属性的token，随响应返回前端。

前端登录态存储逻辑 #

登录成功后执行如下逻辑存储token并跳转：

import Cookies from 'universal-cookie';

const Login = (token, navigate) => {
  const cookies = new Cookies();
  cookies.set('token', token, { path: '/' });
  setTimeout(() => {
    navigate('/');
    window.location.reload(false);
  }, 2000);
};

export default Login;

使用universal-cookie存储token，登出逻辑如下：

import Cookies from 'universal-cookie';

const Logout = (navigate) => {
  const cookies = new Cookies();
  const cookie = cookies.get('token');

  if (cookie) {
    cookies.remove('token');
    navigate('/');
    window.location.reload(false);
  }
};

export default Logout;

问题1解答：现有实现不符合开发规范与最佳实践，存在多类问题 #

1. 显性代码bug #

后端逻辑存在两处未定义变量引用：

• 密码校验时传入的currentPassword未定义，应该替换为入参的password
• 生成token时引用的target对象未定义，应该替换为数据库查询到的user对象
  两处问题都会直接导致接口运行报错，根本无法正常完成登录流程。

2. 安全层面缺陷 #

• Cookie配置缺失：存储token时仅配置了path: '/'，生产环境必须补充samesite: 'lax'/'strict'防CSRF攻击、secure: true限制仅HTTPS传输、配置合理的maxAge/expires明确token过期时间；因为使用JS读写Cookie无法开启httpOnly，必须额外做好全站XSS防护，避免恶意脚本注入窃取token。
• 错误提示粒度过细：返回“邮箱不存在”“密码错误”的明确区分提示，会被攻击者利用枚举站点已注册邮箱，建议统一返回“邮箱或密码错误”。
• 缺少防爆破机制：登录接口没有加频次限制、验证码校验，很容易被撞库攻击。
• 密码比对风险：如果CheckPasswords没有使用常量时间比对逻辑，接口响应时长会随密码匹配度变化，存在被时序攻击暴力破解的风险。

3. 体验与工程实现问题 #

• 登录成功后固定2秒延迟跳转属于无意义等待，严重影响用户体验。
• 路由跳转后调用window.location.reload强制整页刷新，破坏SPA应用的路由体验，正确做法是登录/登出时重置Apollo Client缓存、更新全局登录态即可，不需要硬刷新页面。
• 缺少统一的鉴权中间件：需要在Apollo Server上下文层统一完成token读取、签名校验、用户信息注入逻辑，不要在每个业务接口单独处理鉴权。

问题2解答：登出token残留的核心原因是Cookie操作属性不匹配 #

Cookie的删除规则要求：调用remove方法时必须传入和set时完全一致的path、domain、secure等属性，才能匹配到目标Cookie完成删除。
你在set token时明确指定了path: '/'，但remove时没有传入任何匹配属性，此时universal-cookie会默认使用当前页面的路径作为path去匹配删除：如果触发登出的页面路径不是根路径/，浏览器会判定你要删除的是当前路径下的同名Cookie，和之前存在根路径下的token不是同一个条目，自然无法删除，就会出现残留。
修复方式非常简单，删除时和写入时保持配置完全一致即可：

cookies.remove('token', { path: '/' });

另外两个可能触发偶发残留的原因：

1. 删除Cookie后立刻触发路由跳转、页面硬刷新，会打断浏览器的Cookie修改流程，导致删除操作未生效，建议去掉不必要的硬刷新逻辑，或者等Cookie操作完成后再执行跳转。
2. 如果后续给Cookie加过domain配置（比如支持多子域共享），remove时没有传入匹配的domain值，也会出现匹配失败删不掉的问题，只要保证set和remove的所有配置完全一致就能规避。

内容的提问来源于stack exchange，提问作者anon