通过 100+ 技巧集合学习 Nuxt!

nuxt-fortify
nuxt-fortify

将 Laravel fortify 和 sanctum 与 Nuxt 结合使用

🎉 Nuxt Laravel Fortify 和 Sanctum 模块

npm versionnpm downloadsLicenseNuxt

这个 Nuxt 模块以 SSR 友好的方式无缝集成了 Nuxt 与 Laravel Fortify 和 Sanctum,提供了一系列丰富的身份验证功能。 通过此模块,您可以利用 Laravel Fortify 的功能,并执行 API Token 和基于 SPA Cookie 的身份验证。

🚀 功能特性

  • 注册 📋
  • 重置密码 🔄
  • 邮箱验证 📧
  • 更新个人资料 ✏️
  • 更新密码 🔐
  • 两因素身份验证 🔒

🛠️ 安装和配置

💡注意: 您需要在后端 Laravel 应用程序中安装和设置 Laravel FortifyLaravel Sanctumfortify-sanctum 包。 fortify-sanctum 包可以轻松地将 Laravel Fortify 的身份验证功能与 Laravel Sanctum 集成。


nuxt-fortify 模块添加到您的 nuxt 项目中

npx nuxi@latest module add nuxt-fortify

💻 Nuxt 配置

通过安装模块并在 nuxt.config.js 中配置它,将其添加到您的 Nuxt 项目中。

// nuxt.config.js
export default {
  modules: [
    'nuxt-fortify',
  ],
  nuxtFortify: {
    baseUrl: 'https://127.0.0.1:3000/api',
    origin: 'https://127.0.0.1:3000',
    authMode: 'cookie',
    authHome: '/dashboard',
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      user: '/user',
      // other endpoints...
    },
    features: {
        registration: true,
        resetPasswords: true,
        twoFactorAuthentication: true,
      // other features...
    }
    // other configurations...
  }
}

📜 配置

数据类型默认值是否必需
baseUrl字符串https://127.0.0.1:3000/api
authMode字符串cookie
loginRouteendpoint/login
authHomeendpoint/home
cookieKey字符串XSRF-TOKEN
cookieHeader字符串X-XSRF-TOKEN
tokenStorageKey字符串API-TOKEN
endpoints.csrfendpoint/sanctum/csrf-cookie
endpoints.loginendpoint/login
endpoints.logoutendpoint/logout
endpoints.userendpoint/user
endpoints.tfa.enableendpoint/user/two-factor-authentication
endpoints.tfa.disableendpoint/user/two-factor-authentication
endpoints.tfa.codeendpoint/user/two-factor-qr-code
endpoints.tfa.confirmendpoint/user/confirmed-two-factor-authentication
endpoints.tfa.recoveryCodeendpoint/user/two-factor-recovery-codes
endpoints.tfa.challengeendpoint/two-factor-challenge
endpoints.registerendpoint/register
endpoints.resetPasswordendpoint/forgot-password
endpoints.updatePasswordendpoint/reset-password
endpoints.confirmPasswordendpoint/user/confirm-password
endpoints.resendEmailVerificationLinkendpoint/email/verification-notification
intendedRedirect布尔值true
features.registration布尔值true
features.resetPasswords布尔值true
features.emailVerification布尔值true
features.updateProfileInformation布尔值true
features.updatePasswords布尔值true
features.twoFactorAuthentication布尔值true
tfaRouteendpoint/two-factor-authentication
logLevel数字1
origin字符串https://127.0.0.1:3000

🌐 端点配置

端点键路径请求方法
csrf/sanctum/csrf-cookiePOST
login/loginPOST
logout/logoutPOST
user/userPOST
tfa.enable/user/two-factor-authenticationPOST
tfa.disable/user/two-factor-authenticationDELETE
tfa.code/user/two-factor-qr-codeGET
tfa.confirm/user/confirmed-two-factor-authenticationPOST
tfa.recoveryCode/user/two-factor-recovery-codesGET
tfa.challenge/two-factor-challengePOST
register/registerPOST
resetPassword/forgot-passwordPOST
updatePassword/reset-passwordPOST
confirmPassword/user/confirm-passwordPOST
resendEmailVerificationLink/email/verification-notificationPOST

通过遵循这些步骤和配置,您将拥有一个与 Laravel Fortify 和 Sanctum 完全集成的 Nuxt 应用程序,从而提供强大的身份验证解决方案。 🚀

🤝 贡献

我们欢迎您为增强此模块做出贡献。 以下是贡献的步骤

  1. Fork 仓库:在 GitHub 上创建此仓库的一个 fork。
  2. 克隆您的 Fork:将您 fork 的仓库克隆到您的本地机器。
    git clone https://github.com/dev-charles15531/nuxt-forify.git
    cd nuxt-fortify
    
  3. 创建分支:为您的功能或 bug 修复创建一个新分支。
    git checkout -b feature-or-bugfix-name
    
  4. 进行更改:实现您的功能或 bug 修复。 确保您的代码遵循项目的编码标准并通过所有测试。
  5. 提交更改:使用清晰简洁的提交消息提交您的更改。
    git add .
    git commit -m "Description of the feature or fix"
    
  6. 推送到您的 Fork:将您的更改推送到您 fork 的仓库。
    git push origin feature-or-bugfix-name
    
  7. 打开 Pull Request:向主仓库打开一个 pull request。 清晰地描述您的更改以及它们解决的问题或功能。

📝 指南

  • 遵循项目中使用的编码风格。
  • 编写清晰简洁的提交消息。
  • 确保您的代码通过所有测试,并且不会引入新问题。
  • 如果您的更改影响模块的使用或配置方式,请更新文档。

📧 联系方式

如果您有任何问题或需要帮助,请随时提出 issue 或联系此仓库的维护者。

感谢您的贡献! 您的努力非常感谢。 🙌