node.js - 在开发环境中使用 Vue.js 热重载服务器 + Node 服务器进行 Passport.js 身份验证时出现问题

Question

编辑:出于某种原因，我的 Vue 前端没有设置 session cookie

目标:

使用 Twitch 实现登录并在前端和后端之间同步经过身份验证的 session

描述:

我在使用下述架构的开发环境中进行 Passport.js 身份验证时遇到问题。我正在尝试使用 passport-twitch

实现 Login with Twitch(社交网站)

前端:Vue.js、webpack

后端:Node、Express、Passport

我的开发环境:

我运行 npm run dev 并有一个热重载服务器在 localhost:8080 上运行我的 Vue.js 客户端。请注意，这个用于重新加载前端的热重载服务器仅在我开发时运行。

我的 Node 后端在 localhost:3000 上运行时也提供一些 API，我的本地前端将向本地后端发出 HTTP 请求。

生产环境

在准备生产时，我将在我的 Vue.js 前端运行 npm run build，它会被缩小并作为纯静态 HTML 放置在 dist 文件夹中， CSS 和 JS 文件。

我的 Node/Express 后端服务器将提供这些静态文件并支持后端 API。

代码

这是我在 app.js 文件中导入的 auth.js 模块，npm start 将启动服务器:

const passport = require('passport')
const TwitchStrategy = require('passport-twitch').Strategy

// Retrieve our encrypted secrets depending on the environment
const config = require('config')

// Postgresql connection
var knex = require('knex')({
  client: 'pg',
  connection: config.get('postgres')
});

passport.use(new TwitchStrategy({
  clientID: config.get('twitch.clientID'),
  clientSecret: config.get('twitch.clientSecret'),
  callbackURL: config.get('twitch.authCallbackURL'),
  scope: 'user_read'
}, (accessToken, refreshToken, profile, done) => {
  // Upsert into users table
  knex.raw(`
    INSERT INTO users
      (twitch_id)
    VALUES
      (${profile.id})
    ON CONFLICT (twitch_id) DO UPDATE SET
      updated_at = now() at time zone 'utc'
    WHERE users.twitch_id = '${profile.id}'
    RETURNING *`)
  .then((rows, err) => {
    return done(err, profile)
  })
}))

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(user, done) {
    done(null, user);
});

module.exports = passport

我在 localhost:3000 后端运行这些端点以支持 passport-twitch

app.get('/auth/twitch', passport.authenticate('twitch'))

app.get('/auth/twitch/callback', passport.authenticate('twitch', { failureRedirect: '/'}), (req, res) => {
  // Successful authentication, redirect home.
  return res.redirect('/')
})

在开发环境工作流程中出现问题

我有 2 个服务器在开发环境中运行。

在开发中编写和测试前端代码时，我在 localhost:8080 运行热重载前端，并调用后端。

但我需要调用 localhost:3000/auth/twitch 将用户重定向到 Login with Twitch 页面。但是，当用户完成登录时，它会将我重定向到 localhost:3000/auth/callback，这将重定向到 localhost:3000/。

此时经过身份验证的 session 已断开连接，前端不知道如何进行身份验证？

如何在开发模式下在 Vue.js 客户端/前端和 Node 后端之间同步经过身份验证的 session ？

// This helps me get the current authenticated user in the session (returns empty hash in this case)
// Works fine in production mode since the Node backend gets to serve the minified frontend files
app.get('/self', (req, res) => {
  res.json(req.user || {})
})

Answer 1

基本上我只需要使用 withCredentials: true 初始化 Axios

从'axios'导入axios

export default() => {
  return axios.create({
    baseURL: `http://localhost:8081`,
    withCredentials: true
  })
}

此外，当从我的 OAuth 回调重定向时，我必须将其更改为重定向到我的 localhost:8080(热重载 Vue 前端)，而不是我的 Node 后端在 本地主机:3000

app.get('/auth/twitch/callback', passport.authenticate('twitch', { failureRedirect: '/'}), (req, res) => {
  // Successful authentication, redirect home.
  if(process.env.NODE_ENV === 'production') return res.redirect('/')
  res.redirect('http://localhost:8080')
})