在开发环境中使用 Vue.js 热重载服务器 + 节点服务器的 Passport.js 身份验证问题答案

【问题标题】：Trouble with Passport.js auth with Vue.js hot-reload server + Node server in dev environment在开发环境中使用 Vue.js 热重载服务器 + 节点服务器的 Passport.js 身份验证问题
【发布时间】：2018-01-21 11:48:24
【问题描述】：

编辑：出于某种原因，我的 Vue 前端没有设置会话 cookie

目标：

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

说明：

我在使用下面描述的架构的开发环境中使 Passport.js 身份验证工作时遇到问题。我正在尝试使用passport-twitch 使用 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、CSS 和 JS 文件放置在 dist 文件夹中。

我的 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 台服务器在开发环境中运行。

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

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

认证的会话此时已断开连接，前端不知道如何认证？

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

// 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 || {})
})

【问题讨论】：

标签： node.js express vue.js vuejs2 passport.js

【解决方案1】：

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

从'axios'导入axios

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

此外，当从我的 OAuth 回调重定向时，我必须将其更改为重定向到我的 localhost:8080（热重载 Vue 前端），而不是我的 Node 后端在 localhost: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')
})

【讨论】：