如何在Ionic Angular的请求头中设置SessionID（Laravel后端）

单个请求添加SessionID #

首先你需要获取Laravel生成的SessionID（默认存储在名为laravel_session的Cookie中），可以通过解析Cookie拿到值，再将其添加到请求头的Cookie字段里：

1. 先写一个解析Cookie的工具函数：

function getLaravelSessionId() {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [name, value] = cookie.split('=');
    if (name === 'laravel_session') {
      return value;
    }
  }
  return null;
}

2. 修改你的请求代码，添加SessionID到请求头：

let url ='http://localhost:8000/api/....';
const sessionId = getLaravelSessionId();
var headers = new HttpHeaders();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json');

// 若获取到SessionID则添加到请求头
if (sessionId) {
  headers.append('Cookie', `laravel_session=${sessionId}`);
}

// 跨域请求需加上withCredentials确保Cookie能正常传递
let options = {
  headers: headers,
  withCredentials: true
}

this.http.post(url, {id: id}, options).subscribe((data:any)=>{
  console.log(data);
});

全局拦截器自动添加（推荐） #

因为每个请求都需要携带SessionID，用HTTP拦截器可以避免重复代码，自动给所有请求加上SessionID：

1. 创建Session拦截器文件session.interceptor.ts：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class SessionInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const sessionId = this.getLaravelSessionId();
    if (sessionId) {
      // 克隆请求并添加Cookie头及跨域凭证配置
      request = request.clone({
        setHeaders: {
          Cookie: `laravel_session=${sessionId}`
        },
        withCredentials: true
      });
    }
    return next.handle(request);
  }

  private getLaravelSessionId(): string | null {
    const cookies = document.cookie.split('; ');
    for (let cookie of cookies) {
      const [name, value] = cookie.split('=');
      if (name === 'laravel_session') {
        return value;
      }
    }
    return null;
  }
}

2. 在app.module.ts中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { SessionInterceptor } from './session.interceptor';

@NgModule({
  declarations: [
    // ...你的组件
  ],
  imports: [
    // ...你的模块
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: SessionInterceptor,
      multi: true
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

注意事项 #

• 若你修改了Laravel的Session Cookie名称（在.env中修改SESSION_COOKIE），需要同步修改代码中对应的Cookie名称。
• 跨域场景下，需确保Laravel的CORS配置开启supports_credentials：在config/cors.php中设置'supports_credentials' => true。

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