Laravel后端搭配React前端使用Fortify+Sanctum做身份验证的方案咨询

官方文档核心指引 #

Laravel官方对这两个组件的组合使用有完整的配套说明，核心配置流程如下：

后端配置步骤 #

• 先完成Sanctum部署：执行php artisan install:api，命令会自动完成Sanctum的配置文件发布、数据库迁移生成、API中间件组注册
• 再安装Fortify：执行composer require laravel/fortify，之后运行php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"发布Fortify的配置文件和基础控制器
• 修改跨域配置：在config/cors.php中添加前端React应用的访问域名到paths和allowed_origins项，同时将supports_credentials设置为true
• 调整Sanctum状态域配置：在config/sanctum.php的stateful数组中添加前端域名，确保Sanctum可以识别来自React端的状态化请求
• Fortify的身份验证驱动无需额外修改，默认适配Sanctum的会话验证逻辑

前端React配置步骤 #

• 全局配置请求参数：如果使用axios作为请求库，可全局设置axios.defaults.withCredentials = true，确保所有请求自动携带跨域凭证
• 初始化CSRF令牌：在应用挂载或首次发起登录请求前，先调用/sanctum/csrf-cookie接口，Laravel会自动将CSRF令牌写入当前域的Cookie中，后续请求会自动携带该令牌完成校验
• 登录逻辑直接调用Fortify提供的/login接口，提交email和password参数即可，验证通过后后端会自动下发会话Cookie
• 后续所有需要鉴权的接口无需额外手动携带令牌，浏览器会自动携带Sanctum会话Cookie完成身份校验

主流实践优化点 #

现有成熟教程中普遍推荐的优化方案包括：

• 可在React应用的全局入口处统一请求一次CSRF令牌，避免每次接口调用前重复请求
• 封装统一的响应拦截器，捕获401未授权状态时自动清理前端缓存的用户信息并跳转到登录页
• 退出登录直接调用Fortify内置的/logout接口，即可同时清除后端会话和前端的相关Cookie
• 全程不需要在前端本地存储任何身份凭证，依赖Cookie的SameSite配置和CSRF防护机制即可达到较高的安全等级

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