Laravel 11与Angular 18 Sanctum认证失效求助

针对你遇到的「登录后立即登出、带Cookie仍无法访问受保护路由」的问题，结合你的配置代码，以下是具体的修复方案：

Laravel 端修复 #

1. 调整SESSION_DOMAIN配置 #

在.env文件中修改SESSION_DOMAIN：

SESSION_DOMAIN=localhost

原因：本地开发中，.localhost的泛域名格式会导致浏览器Cookie策略异常，直接设置为localhost（匹配同一域名下的不同端口）更符合Cookie共享规则。

2. 优化SANCTUM_STATEFUL_DOMAINS配置 #

将.env中的SANCTUM_STATEFUL_DOMAINS改为动态读取前端地址：

SANCTUM_STATEFUL_DOMAINS=${FRONTEND_URL}

避免手动输入端口错误，确保前端域名被正确加入Sanctum的可信列表。

3. 确保登录路由返回JSON响应 #

如果使用默认的/login web路由，修改LoginController的authenticated方法，强制返回JSON：

// app/Http/Controllers/Auth/LoginController.php
protected function authenticated(Request $request, $user)
{
    return response()->json([
        'message' => '登录成功',
        'user' => $user
    ]);
}

原因：Laravel默认会根据请求头返回视图，Angular需要JSON响应来正确处理登录状态。

4. 清除配置缓存 #

执行命令使配置修改生效：

php artisan config:clear
php artisan cache:clear

Angular 端修复 #

1. 移除重复的XSRF配置 #

Angular的withXsrfConfiguration已自动处理XSRF Token的获取与发送，无需在自定义拦截器中重复设置。修改拦截器代码：

import { HttpInterceptorFn } from '@angular/common/http';

export const httpTokenInterceptor: HttpInterceptorFn = (req, next) => {
  const modifiedReq = req.clone({
    withCredentials: true,
    setHeaders: {
      'Accept': 'application/json',
    },
  });

  return next(modifiedReq);
};

删除原拦截器中的getCookie函数及X-XSRF-TOKEN手动设置逻辑，避免与Angular内置XSRF拦截器冲突。

2. 规范登录流程顺序 #

在登录组件中，必须先获取CSRF Token，再发送登录请求：

// 示例登录组件代码
import { HttpTokenService } from './path/to/http-token.service';
import { Router } from '@angular/router';

constructor(private authService: HttpTokenService, private router: Router) {}

login(loginForm: any) {
  this.authService.getCsrfToken().subscribe({
    next: () => {
      this.authService.login(loginForm.value).subscribe({
        next: () => this.router.navigate(['/dashboard']),
        error: err => console.error('登录失败:', err)
      });
    },
    error: err => console.error('获取CSRF Token失败:', err)
  });
}

3. 完善登录请求头 #

修改HttpTokenService的login方法，确保携带Accept: application/json头：

login(data: any): Observable<any> {
  const loginHeaders = this.headers.append('Accept', 'application/json');
  return this.http.post(`${this.baseUrl}/login`, data, { withCredentials: true, headers: loginHeaders })
    .pipe(tap(() => this.isLoggedInSubject.next(true)));
}

验证步骤 #

1. 重启Laravel和Angular服务；
2. 打开浏览器开发者工具，在Application > Cookies > localhost下，确认登录后存在laravel_session和XSRF-TOKEN；
3. 访问受auth:sanctum保护的路由，查看Network标签中的请求，确认Cookie字段已携带，且响应状态码为200。

内容的提问来源于stack exchange，提问作者Youssera Zoukha MECIFI