Passportjs Local结合Axios Ajax、VueJS认证实现及模板引擎适配咨询

模板引擎场景下的Passport Local Ajax调用可行性 #

完全可以，没有任何冲突。
Passport.js Local策略的核心逻辑是处理HTTP请求中携带的用户名、密码字段，校验通过后在服务端生成Session绑定用户登录态，和后端采用什么模板引擎渲染视图没有关联。
你用Handlebars或者Pug做服务端渲染时，只需要在渲染出来的页面里写前端JS逻辑，通过Ajax提交登录表单参数到Passport的登录接口即可，不需要走传统的表单整页提交刷新的流程，体验和前后端分离场景一致。 #

Vue + Axios + Passport Local 认证实现步骤 #

1. 后端（Node.js + Express + Passport）配置 #

• 先安装所需依赖：
  npm install express passport passport-local express-session cors
• 核心配置代码示例：

const express = require('express')
const session = require('express-session')
const passport = require('passport')
const LocalStrategy = require('passport-local').Strategy
const cors = require('cors')
const app = express()

// 配置CORS，允许前端携带凭证
app.use(cors({
  origin: '你的前端域名地址',
  credentials: true
}))
// 解析POST请求参数
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// 配置Session
app.use(session({
  secret: '自定义的加密密钥',
  resave: false,
  saveUninitialized: false,
  cookie: {
    sameSite: 'lax', // 跨域场景可调整为none，同时需要开启secure: true
    maxAge: 24 * 60 * 60 * 1000 // 登录态有效期1天
  }
}))

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

// 配置Local策略的校验逻辑，可自定义对接你的用户数据库
passport.use(new LocalStrategy((username, password, done) => {
  // 这里替换成你自己的用户名校验逻辑
  User.findOne({ username: username }, (err, user) => {
    if (err) return done(err)
    if (!user) return done(null, false, { message: '用户名不存在' })
    if (!user.validPassword(password)) return done(null, false, { message: '密码错误' })
    return done(null, user)
  })
}))

// Passport序列化/反序列化用户
passport.serializeUser((user, done) => done(null, user.id))
passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => done(err, user))
})

// 登录接口，返回JSON格式结果
app.post('/api/login', passport.authenticate('local'), (req, res) => {
  res.json({ success: true, user: { id: req.user.id, username: req.user.username } })
})

// 登录状态校验接口
app.get('/api/auth/status', (req, res) => {
  res.json({ isLoggedIn: !!req.user, user: req.user ? { id: req.user.id, username: req.user.username } : null })
})

// 登出接口
app.post('/api/logout', (req, res) => {
  req.logout()
  res.json({ success: true })
})

2. 前端（Vue + Axios）配置 #

• 全局配置Axios允许携带Cookie（Passport默认依赖Session Cookie存储登录态）：

// 在Vue项目的main.js中配置
import axios from 'axios'
axios.defaults.baseURL = '你的后端接口地址'
axios.defaults.withCredentials = true

• 登录请求逻辑示例：

// 登录页面的提交方法
async function handleLogin(formData) {
  try {
    const res = await axios.post('/api/login', {
      username: formData.username,
      password: formData.password
    })
    if (res.data.success) {
      // 登录成功后的逻辑：比如将用户信息存入Pinia/Vuex，跳转到仪表盘页面
      this.$router.push('/dashboard')
    }
  } catch (error) {
    // 登录失败后的逻辑：比如弹出错误提示
    alert('用户名或密码错误')
  }
}

• 路由守卫校验登录态：

// 路由配置文件中添加全局前置守卫
router.beforeEach(async (to, from, next) => {
  // 需要登录才能访问的页面标记
  if (to.meta.requireAuth) {
    const res = await axios.get('/api/auth/status')
    if (res.data.isLoggedIn) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

注意事项 #

• 如果是纯服务端渲染模板引擎的场景，不需要修改Passport的核心逻辑，只需要把原有的登录成功后重定向的逻辑改为返回JSON格式即可，前端发Ajax请求接收返回结果处理交互。
• 跨域场景下要注意Session的Cookie配置，sameSite属性设置为none时必须同时开启secure: true，且后端和前端都要配置允许携带凭证，否则Cookie会被浏览器拦截导致登录态失效。

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