前后端分属不同Git仓库与域名时如何实现Laravel用户认证

核心实现前置对齐 #

当前架构已经完成后端基于Token的路由认证逻辑，前后端独立仓库、分域名部署，不需要调整原有后端token校验的核心逻辑，只需要围绕跨域请求的特性做配套适配即可。

前端侧核心实现步骤 #

• 全局请求基础配置：在前端HTTP客户端（如axios、fetch）中开启跨域凭证携带配置，对应axios的配置为axios.defaults.withCredentials = true，确保跨域请求时浏览器会自动附带对应域名下的Cookie信息
• 认证态存储策略：采用双Token分离存储逻辑，降低XSS攻击风险：
  • 短期Access Token（有效期15分钟）：仅存在内存级的前端状态容器中（如Pinia/Vuex、React Context），页面刷新后临时丢失，不做任何持久化存储，避免被全局JS脚本窃取
  • 长期Refresh Token（有效期7天）：完全交由后端通过HttpOnly、Secure、SameSite=None属性的Cookie写入到后端域名下，前端JS无权限读取、修改，从根源避免XSS窃取
• 登录流程落地：
  1. 用户在前端页面提交账号密码，通过POST JSON请求发送到后端登录接口
  2. 后端校验账号信息通过后，在响应体中返回短期Access Token，同时在响应头中设置带安全属性的Refresh Token Cookie
  3. 前端将接收到的Access Token写入内存状态容器，跳转至首页
• 已登录接口请求逻辑：所有需要认证的后端请求，自动从内存状态中读取Access Token，拼接到请求头Authorization: Bearer {token}字段中，不需要手动逐请求添加
• 无感续期逻辑：封装全局请求响应拦截器，当后端返回401未认证状态时，自动调用后端的Refresh Token接口，依靠跨域Cookie携带的凭证完成校验，拿到新的Access Token后自动重发之前失败的请求，全程不打断用户操作
• 登出流程：前端调用后端登出接口，由后端将对应域名下的Refresh Token Cookie置为失效，前端清空内存中存储的Access Token，跳转回登录页

后端配套适配调整（Laravel v8） #

• 跨域配置调整：打开config/cors.php配置文件，将前端实际部署的域名加入allowed_origins白名单，将allowed_headers补充Authorization, Content-Type字段，重点将supports_credentials参数设置为true，否则跨域携带Cookie的请求会被浏览器安全策略拦截
• Cookie属性校准：后端写入Refresh Token Cookie时，生产环境必须配合HTTPS设置secure=true，同时将sameSite设置为none，否则跨域场景下浏览器不会自动附带该Cookie
• 原有Token校验中间件逻辑不需要做任何修改，仍然保持从请求头Authorization字段读取Access Token做校验的逻辑即可

高频踩坑规避 #

• 不要尝试通过前端JS手动写入Refresh Token到Cookie，跨域场景下JS本身没有权限写入其他域名下的Cookie，所有Cookie的写入、修改、删除操作必须由后端通过响应头完成
• 不要将Access Token存入localStorage、sessionStorage等持久化存储，一旦被XSS脚本窃取，短有效期的内存存储机制可以把风险影响范围降到最低
• 前端路由守卫仅用于优化用户体验，不能作为权限校验的最终依据，所有敏感数据接口必须在后端重新完成Token和权限校验，前端无法拦截任何绕过页面的恶意请求
• 不要使用默认form表单格式提交登录请求，这类请求容易触发CORS预检规则拦截，统一采用JSON格式发送请求即可

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