如何在Nuxt.js中通过外部API实现Cookie式身份验证？

从零搭建核心流程 #

• Go 后端：
  • 登录接口验证用户合法性后，用github.com/gorilla/securecookie生成带签名的Cookie，设置HttpOnly、Secure（生产环境）、SameSite属性，同时配置路径与过期时间。
  • 编写接口中间件，解析并验证Cookie中的用户标识，验证通过才允许接口访问。
  • 登出接口直接清除对应Cookie。
• Nuxt.js 前端：
  • 登录请求用$fetch或axios时，配置credentials: 'include'确保Cookie自动携带。
  • 路由层面做权限控制：Nuxt 3用definePageMeta指定中间件，Nuxt 2用自定义auth中间件，通过调用后端状态接口判断用户是否已认证，未认证则跳转登录页。

工具适配方案 #

• AuthJS 对接外部后端：
  • 自定义credentials provider，在authorize函数里调用Go后端登录接口，验证通过后返回用户信息；将session策略设为cookie，手动对齐后端Cookie的传递逻辑。
  • 重点参考AuthJS官方文档里的「Custom Credentials Provider」章节，结合Go接口规范调整参数。
• Nuxt 3 原生中间件实现：
  • 创建全局中间件，路由跳转前调用后端验证接口，根据结果放行或重定向。示例代码：

    export default defineNuxtRouteMiddleware((to, from) => {
      const { data: user } = useFetch('/api/auth/me', { credentials: 'include' })
      if (!user.value && to.path !== '/login') {
        return navigateTo('/login')
      }
    })
    

关键注意事项 #

• 前后端跨域时，Go后端需配置Access-Control-Allow-Origin为前端域名，同时开启Access-Control-Allow-Credentials: true。
• Cookie的SameSite属性：开发环境设为Lax，生产环境用Strict或None（需搭配Secure）。
• Go后端的Cookie签名密钥通过环境变量注入，禁止硬编码。

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