Nuxt.js Auth模块与Laravel后端集成：JWT、Passport、Sanctum完整指南

Nuxt.js Auth模块与Laravel后端集成：JWT、Passport、Sanctum完整指南

【免费下载链接】auth-moduleZero-boilerplate authentication support for Nuxt 2!项目地址: https://gitcode.com/gh_mirrors/au/auth-module

Nuxt.js Auth模块（au/auth-module）为Nuxt 2提供零样板代码的身份验证支持，是连接前端与后端的强大桥梁。本文将详细介绍如何将该模块与Laravel后端的三种主流认证方案（JWT、Passport、Sanctum）无缝集成，帮助开发者快速实现安全可靠的用户认证系统。

Nuxt Auth模块提供零样板代码的身份验证解决方案

1. 准备工作：快速安装与配置

1.1 安装Nuxt Auth模块

首先通过npm或yarn安装模块：

npm install @nuxtjs/auth # 或 yarn add @nuxtjs/auth

1.2 基础配置（nuxt.config.js）

在Nuxt配置文件中添加模块并设置基础参数：

// nuxt.config.js export default { modules: [ '@nuxtjs/axios', '@nuxtjs/auth' ], axios: { baseURL: 'http://your-laravel-api.com' }, auth: { strategies: { // 认证策略配置将在后续章节详细说明 } } }

2. Laravel JWT认证集成

2.1 JWT认证原理与优势

JWT（JSON Web Token）是一种无状态认证机制，适合前后端分离应用。Laravel JWT认证通过生成加密令牌实现用户身份验证，无需在服务器存储会话状态。

2.2 配置Nuxt Auth模块

在nuxt.config.js中添加JWT策略配置：

// nuxt.config.js auth: { strategies: { laravelJWT: { url: 'http://your-laravel-api.com', endpoints: { login: { url: '/api/auth/jwt/login', method: 'post' }, refresh: { url: '/api/auth/jwt/refresh', method: 'post' }, logout: { url: '/api/auth/jwt/logout', method: 'post' }, user: { url: '/api/auth/jwt/user', method: 'get' } }, token: { property: 'token.accessToken', maxAge: 3600 }, refreshToken: { property: 'token.refreshToken', data: 'refreshToken', maxAge: 60 * 60 * 24 * 30 } } } }

2.3 实现登录功能

在Vue组件中使用this.$auth.loginWith方法实现登录：

async login() { try { await this.$auth.loginWith('laravelJWT', { data: { email: this.email, password: this.password } }) this.$router.push('/dashboard') } catch (error) { this.error = error.message } }

JWT认证相关源码可查看：src/providers/laravel-jwt.ts

3. Laravel Passport认证集成

3.1 Passport认证特点

Laravel Passport是基于OAuth2.0的完整认证解决方案，支持授权码、密码、客户端凭证等多种授权方式，适合需要第三方应用授权的场景。

3.2 配置Passport策略

// nuxt.config.js auth: { strategies: { laravelPassport: { url: 'http://your-laravel-api.com', clientId: 'your-client-id', clientSecret: 'your-client-secret', grantType: 'authorization_code', endpoints: { authorization: '/oauth/authorize', token: '/oauth/token', userInfo: '/api/auth/passport/user' }, token: { maxAge: 1800 }, refreshToken: { maxAge: 60 * 60 * 24 * 30 } } } }

3.3 密码授权模式

对于移动应用或第一方应用，可使用密码授权模式：

laravelPassportPasswordGrant: { name: 'laravelPassportPassword', provider: 'laravelPassport', grantType: 'password', clientId: 'your-password-client-id', clientSecret: 'your-password-client-secret' }

Passport认证实现细节可参考：src/providers/laravel-passport.ts

4. Laravel Sanctum认证集成

4.1 Sanctum的优势与适用场景

Laravel Sanctum提供简单的API令牌认证和SPA认证，适合单页应用和移动应用，支持跨域请求和会话认证。

4.2 快速配置Sanctum

// nuxt.config.js auth: { strategies: { laravelSanctum: { url: 'http://your-laravel-api.com', endpoints: { login: { url: '/api/login', method: 'post' }, logout: { url: '/api/logout', method: 'post' }, user: { url: '/api/user', method: 'get' } }, user: { property: false }, cookie: { name: 'XSRF-TOKEN' } } } }

4.3 跨域配置注意事项

确保Laravel后端正确配置CORS：

// config/cors.php return [ 'paths' => ['api/*', 'login', 'logout'], 'allowed_methods' => ['*'], 'allowed_origins' => ['http://your-nuxt-app.com'], 'allowed_origins_patterns' => [], 'allowed_headers' => ['*'], 'exposed_headers' => [], 'max_age' => 0, 'supports_credentials' => true, ];

Sanctum认证模块源码位于：src/providers/laravel-sanctum.ts

5. 三种认证方案对比与选择建议

Nuxt Auth模块支持多种认证策略

选择建议：

• 新项目且无第三方授权需求：优先选择Sanctum
• 需要支持第三方应用：选择Passport
• 分布式系统或微服务架构：选择JWT

6. 常见问题与解决方案

6.1 跨域请求问题

确保Nuxt和Laravel都正确配置CORS，Nuxt中设置axios.withCredentials: true。

6.2 令牌刷新机制

对于JWT和Passport，建议使用Nuxt Auth的refreshscheme自动处理令牌刷新：

strategies: { localRefresh: { scheme: 'refresh', token: { maxAge: 15 }, refreshToken: { maxAge: 60 * 60 * 24 * 30 } } }

6.3 认证状态持久化

通过配置存储方式实现认证状态持久化：

auth: { storage: 'localStorage', // 或 'cookie' cookie: { options: { maxAge: 60 * 60 * 24 * 7 } } }

7. 总结与进阶资源

Nuxt.js Auth模块通过统一的API简化了与Laravel后端的认证集成，支持JWT、Passport和Sanctum三种主流方案。选择合适的认证策略并正确配置，能为你的应用提供安全可靠的用户认证系统。

官方文档：docs/content/en/index.md

进阶学习：

• 自定义认证策略：docs/content/en/recipes/extend.md
• 中间件使用指南：docs/content/en/guide/middleware.md
• 完整API参考：docs/content/en/api-index.md

通过本文指南，你可以快速实现Nuxt.js与Laravel后端的认证集成，为你的应用构建坚实的安全基础。无论是小型项目还是大型应用，Nuxt Auth模块都能满足你的认证需求，让开发更加高效愉快！

【免费下载链接】auth-moduleZero-boilerplate authentication support for Nuxt 2!项目地址: https://gitcode.com/gh_mirrors/au/auth-module