开发环境下Vue+Node中Passport.js Twitch认证会话同步问题

这个问题我之前也碰到过，核心原因是开发环境下前后端跨域导致Session Cookie无法在前端和后端之间正常共享。浏览器的同源策略会阻止不同端口（8080和3000）之间自动传递Cookie，所以咱们得从几个方面调整配置来解决：

1. 配置Express后端支持跨域Cookie传递 #

首先，你需要确保后端正确配置CORS和Session，让浏览器允许跨域请求携带Cookie：

安装并配置CORS中间件 #

先安装cors包：

npm install cors

然后在你的Express app中添加CORS配置：

const cors = require('cors');

// 开发环境下指定前端地址，生产环境可以调整为实际域名
const allowedOrigin = process.env.NODE_ENV === 'development' 
  ? 'http://localhost:8080' 
  : 'your-production-domain.com';

app.use(cors({
  origin: allowedOrigin,
  credentials: true // 允许跨域携带Cookie
}));

配置Express Session（Passport依赖这个存储会话） #

Passport需要Express Session来保存用户认证状态，如果你还没配置的话，先安装express-session：

npm install express-session

然后添加Session配置：

const session = require('express-session');

app.use(session({
  secret: config.get('session.secret'), // 从你的config里取一个安全的密钥
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: process.env.NODE_ENV === 'production', // 开发环境设为false（因为是HTTP），生产环境设为true（HTTPS）
    sameSite: process.env.NODE_ENV === 'production' ? 'none' : 'lax', // 开发环境用lax，生产环境HTTPS下用none
    maxAge: 24 * 60 * 60 * 1000, // Cookie有效期1天
    httpOnly: true // 防止XSS攻击，建议开启
  }
}));

// 初始化Passport和Session
app.use(passport.initialize());
app.use(passport.session());

2. 配置Vue前端请求携带Credentials #

无论你用axios还是fetch，都需要开启携带Cookie的选项：

如果用Axios #

在你的Vue项目的API配置文件（比如src/api/index.js）或者main.js中添加：

import axios from 'axios';

// 全局配置，所有请求都携带Cookie
axios.defaults.withCredentials = true;
// 或者针对单个请求设置
axios.get('http://localhost:3000/self', { withCredentials: true })
  .then(response => {
    console.log('当前用户:', response.data);
  });

如果用Fetch #

发起请求时加上credentials: 'include'：

fetch('http://localhost:3000/self', { credentials: 'include' })
  .then(response => response.json())
  .then(data => console.log('当前用户:', data));

3. 调整Twitch回调后的重定向地址 #

原来的回调路由重定向到了localhost:3000/，但前端运行在8080，所以应该重定向到前端的首页，这样前端加载后发起的请求才能带上Cookie：

app.get('/auth/twitch/callback', passport.authenticate('twitch', { 
  failureRedirect: 'http://localhost:8080/' 
}), (req, res) => {
  // 重定向到前端首页
  return res.redirect('http://localhost:8080/');
})

最后检查几个关键点 #

• 确保你的config.get('twitch.authCallbackURL')设置的是http://localhost:3000/auth/twitch/callback，并且已经在Twitch开发者后台配置了这个回调地址。
• 开发环境下不要把cookie.secure设为true，因为HTTP协议下浏览器不会保存Secure Cookie。
• 确认Passport的serializeUser和deserializeUser逻辑正确（你的代码里是直接返回user，没问题，但如果后续需要从数据库取用户信息，可以调整这里）。

做完这些配置后，重新启动前后端服务，再测试Twitch登录流程：访问http://localhost:3000/auth/twitch完成登录，回调后重定向到前端，然后前端请求/self接口应该就能拿到登录用户的信息了。

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