React Sanctum: 让您的React应用轻松对接Laravel Sanctum与Fortify

React Sanctum: 让您的React应用轻松对接Laravel Sanctum与Fortify

react-sanctumEasily hook up your React app to Laravel Sanctum and Laravel Fortify项目地址:https://gitcode.com/gh_mirrors/re/react-sanctum

项目介绍

React Sanctum 是一个简化React应用程序与Laravel Sanctum集成的库。它支持在React应用中实现认证功能，无论是通过Hook还是类组件。该库还内置了对Laravel Fortify进行两步验证的支持，使得在React应用中实现复杂认证流程变得更加便捷。通过仅依赖axios，React Sanctum提供了一个轻量级的解决方案来处理与Laravel API的交互。

项目快速启动

安装

首先，确保你的项目已经准备好了axios，并且可以从npm安装React Sanctum：

npm install react-sanctum

应用配置

接下来，在你的React应用中包裹 <Sanctum> 组件，并传入配置对象：

import React from 'react';
import { Sanctum } from 'react-sanctum';

const sanctumConfig = {
    apiUrl: "http://localhost:8000",
    csrfCookieRoute: "/sanctum/csrf-cookie",
    signInRoute: "/login",
    signOutRoute: "/logout",
    userObjectRoute: "/user",
};

function MyApp() {
    return (
        <div className="my-application">
            <Sanctum config={sanctumConfig}>
                {/* 在这里放置你的应用程序代码 */}
            </Sanctum>
        </div>
    );
}

使用认证状态和数据

你可以通过 useSanctum() Hook 来获取用户的认证状态、用户数据以及进行圣杯(Sanctum)相关的操作：

import React from 'react';
import { useSanctum } from 'react-sanctum';

function LoginButton() {
    const [authenticated, user, signIn] = useSanctum();

    const handleLogin = () => {
        // 实现登录逻辑，如调用signIn函数
    };

    return (
        !authenticated ? 
            <button onClick={handleLogin}>登录</button>
            : null
    );
}

应用案例和最佳实践

• 单一页面应用(SPA)整合: 结合Laravel和React Breeze初始化的项目，利用React Sanctum无缝处理认证。
• 状态管理: 整合Redux或Context API来管理认证状态和用户数据，以保持全局一致性和更好的复用性。
• 安全性优化: 确保 SANCTUM_STATEFUL_DOMAINS 配置正确，保护敏感API路由，提升安全性。

典型生态项目

虽然这个文档主要聚焦于React Sanctum本身，但在实际开发中，它经常与Laravel生态系统中的其他工具配合使用，比如Laravel Fortify用于增强认证和授权功能，以及Passport或者Sanctum本身进行API令牌管理。确保你的后端配置（特别是在 .env 文件中的 SANCTUM_STATEFUL_DOMAINS）包含了前端应用的域名，以便正确处理状态ful请求。

---

以上是React Sanctum的基本使用教程和一些实践建议，通过这些步骤，您可以快速地将React应用与Laravel的认证机制相结合，构建安全而高效的现代Web应用。

react-sanctumEasily hook up your React app to Laravel Sanctum and Laravel Fortify项目地址:https://gitcode.com/gh_mirrors/re/react-sanctum