Nuxt中如何隔离会话逻辑：避免API信息与Cookie生成函数暴露

核心思路 #

将客户端直接请求后端API的逻辑改为Nuxt服务端转发：由服务端代为调用后端登录接口，获取敏感用户数据后直接在服务端生成会话Cookie，仅向客户端返回登录状态结果，完全隔离敏感数据和Cookie生成逻辑。

1. 搭建服务端转发登录接口 #

在项目server/api目录下创建登录转发接口，所有客户端登录请求均通过该接口中转，前端无法接触到后端返回的原始数据。

// server/api/login.post.ts
import { defineEventHandler, readBody } from 'h3'
import { useCookie } from '#app'

export default defineEventHandler(async (event) => {
  // 接收客户端登录参数
  const loginForm = await readBody(event)
  
  // 服务端调用真实后端登录API
  const backendRes = await fetch('https://your-backend-domain/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(loginForm)
  })

  if (!backendRes.ok) {
    return { success: false, msg: '登录失败' }
  }

  // 服务端获取后端返回的敏感会话数据
  const sessionData = await backendRes.json()

  // 直接在服务端生成会话Cookie（使用cookie-universal-nuxt服务端API）
  const cookies = useCookie(event)
  cookies.set('session_token', sessionData.token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 86400 // 1天有效期
  })
  cookies.set('user_perms', JSON.stringify(sessionData.permissions), {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    maxAge: 86400
  })

  // 仅向客户端返回登录状态，不暴露敏感数据
  return { success: true }
})

2. 客户端调用转发接口 #

前端不再直接请求后端API，仅调用Nuxt服务端的转发接口，只能获取登录成功/失败的状态。

// pages/login.vue 登录逻辑
const username = ref('')
const password = ref('')

const handleLogin = async () => {
  try {
    const res = await $fetch('/api/login', {
      method: 'POST',
      body: { username: username.value, password: password.value }
    })
    if (res.success) {
      navigateTo('/')
    } else {
      alert(res.msg)
    }
  } catch (err) {
    alert('请求异常')
  }
}

3. 隐藏Cookie生成逻辑 #

Cookie生成逻辑完全封装在服务端接口中，前端无任何Cookie操作代码，自然无法篡改或伪造会话。所有会话相关逻辑仅在服务端可见，彻底隔离前端访问路径。

4. 权限校验的隔离处理 #

页面权限校验同样通过服务端接口完成，前端仅获取校验结果，不接触具体权限数据。

服务端权限校验接口 #

// server/api/check-perm.get.ts
import { defineEventHandler, getQuery } from 'h3'
import { useCookie } from '#app'

export default defineEventHandler(async (event) => {
  const cookies = useCookie(event)
  const rawPerms = cookies.get('user_perms')
  
  if (!rawPerms) {
    return { hasPerm: false }
  }

  const userPerms = JSON.parse(rawPerms)
  const targetPage = getQuery(event).page as string
  return { hasPerm: userPerms.includes(targetPage) }
})

前端路由守卫调用 #

// plugins/router.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hooks.hook('page:validate', async (to) => {
    const { data } = await useFetch('/api/check-perm', {
      query: { page: to.name }
    })
    if (!data.value?.hasPerm) {
      return navigateTo('/403')
    }
  })
})

5. 额外加固建议 #

• 确保会话Cookie开启httpOnly、secure（生产环境）、sameSite: strict，避免XSS/CSRF风险。
• 服务端转发API可添加请求签名机制，防止非法请求直接调用。
• 后端返回的token可改为加密会话ID，服务端通过ID查询用户信息，进一步降低敏感数据暴露风险。

内容的提问来源于stack exchange，提问作者Darlan José Batista do Prado