正确配置Laravel Sanctum和Angular

编程问答 2022-08-12

问题描述

我正在尝试使用Sanctum将angular-app连接到Laravel 7。

后端运行在虚拟主机调用（pruebas.test）中，配置如下：

.env：

APP_URL=http://pruebas.test
SESSION_DOMAIN=pruebas.test
SANCTUM_STATEFUL_DOMAINS=localhost:4300

config / cors.PHP 

paths' => [
        'api/*','/login','/logout','/sanctum/csrf-cookie'
    ],'supports_credentials' => true,

config / session.PHP（现在的same_site不等于任何值，但我尝试使用宽松，严格和null选项）

'same_site' => "none",

kernel.PHP 

'api' => [
            EnsureFrontendRequestsAreStateful::class,'throttle:60,1',\Illuminate\Routing\Middleware\SubstituteBindings::class,],`

在前端，我们使用Angular 10，我们实现了使用以下代码登录的方法：

login(): void {
    const url = `http://pruebas.test/sanctum/csrf-cookie`;
    this.http.get<any>(url).subscribe((res) => {
      console.log(res);

      // the response is correct but not set the cookies
      // this.http.post<any>('http://pruebas.test/api/v1/login',{ password: 'password','email': 'twatsica@example.com' }).subscribe(success => {
      //   console.log(success);
      //   this.http.get<any>('http://pruebas.test/api/v1/articles').subscribe(success => console.log(success));
      // }
      //,error => console.log(error))
    })
  }

我们还可以通过拦截在标头请求中添加withCredentials：

export class AuthInterceptor implements HttpInterceptor {
    headerName = 'X-XSRF-TOKEN';

    constructor(private tokenService: HttpXsrftokenExtractor) { }

    intercept(req: HttpRequest<any>,next: HttpHandler): Observable<HttpEvent<any>> {

        req = req.clone({
            withCredentials: true
        })
        console.log(req);
        req.headers.set('withCredentials','true');
        if (req.method === 'GET' || req.method === 'HEAD') {
            return next.handle(req);
        }

        const token = this.tokenService.getToken();

        // Be careful not to overwrite an existing header of the same name.
        if (token !== null && !req.headers.has(this.headerName)) {
            req = req.clone({ headers: req.headers.set(this.headerName,token) });
        }

        return next.handle(req);
    }
}

但是，浏览器从未设置cookie，取决于我们有不同回应的'same_site'配置，但cookie从未设置。

same_site = lax =>该Set-Cookie被阻止，因为它具有“ SameSite = lax”属性，但来自跨站点存储库，而不是对顶级导航的响应。

same_site = strict =>此Set-Cookie被阻止，因为它具有“ SameSite = strict”属性，但来自跨站点存储库，而不是对顶级导航的响应。

same_site = none =>该Set-Cookie被阻止，因为它具有“ SameSite = none”属性，但没有“ Secure”属性，这是使用“ SameSite = none”所必需的

一些想法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularcookiescookieslaravellaravellaravel-sanctum