JSP/Servlet迁Angular：如何获取登录ID用于后续HTTP请求？

Got it, let's tackle this problem step by step. Since your login page is out of your control and the login ID is available via request.getHeader("loginid") in your Servlet backend, here are a few solid approaches to get that ID into your Angular app for subsequent HTTP requests:

1. Expose a Simple Backend Endpoint to Fetch the Login ID #

This is the most clean and maintainable approach, as it keeps your authentication logic encapsulated in the backend.

Step 1: Create a Servlet Endpoint #

Add a new Servlet to your existing backend that returns the login ID from the request header:

@WebServlet("/api/get-login-id")
public class LoginIdServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String loginId = request.getHeader("loginid");
        response.setContentType("application/json");
        response.getWriter().write("{\"loginId\": \"" + loginId + "\"}");
    }
}

Step 2: Fetch the ID in Angular #

Create a service in Angular to call this endpoint and store the login ID:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private loginId: string | null = null;

  constructor(private http: HttpClient) {}

  fetchLoginId(): Observable<{ loginId: string }> {
    return this.http.get<{ loginId: string }>('/api/get-login-id');
  }

  setLoginId(id: string): void {
    this.loginId = id;
  }

  getLoginId(): string | null {
    return this.loginId;
  }
}

Then, in your app's initial component (like AppComponent), fetch the ID on initialization:

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.authService.fetchLoginId().subscribe({
      next: (response) => {
        this.authService.setLoginId(response.loginId);
        // Now you can use this ID in all subsequent HTTP requests
      },
      error: (err) => {
        console.error('Failed to fetch login ID', err);
      }
    });
  }
}

2. Inject the Login ID into the Angular Entry Page (JSP) #

If you don't want to add a new endpoint, you can inject the login ID directly into the global window object from your JSP entry page (the one that loads your Angular app):

Step 1: Add the Login ID to JSP #

In your index.jsp (or whichever JSP serves your Angular app), add this script block:

<script>
  window.appConfig = {
    loginId: '<%= request.getHeader("loginid") %>'
  };
</script>

Step 2: Access the ID in Angular #

Create a type for the global config and read it in your Angular service:

declare global {
  interface Window {
    appConfig: {
      loginId: string;
    };
  }
}

@Injectable({ providedIn: 'root' })
export class AuthService {
  private loginId: string | null = null;

  constructor() {
    // Read from the global window object on service initialization
    this.loginId = window.appConfig?.loginId || null;
  }

  getLoginId(): string | null {
    return this.loginId;
  }
}

Note: Be cautious with this approach if your app handles sensitive data, as global window variables can be accessed by client-side scripts. Use it only if you trust the client environment.

3. Automatically Attach the Login ID to All HTTP Requests (Angular Interceptor) #

Once you have the login ID, you can use an Angular HTTP interceptor to automatically add it to the headers of every outgoing request, so you don't have to manually include it in each API call:

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const loginId = this.authService.getLoginId();
    if (loginId) {
      // Clone the request and add the login ID header
      const modifiedRequest = request.clone({
        headers: request.headers.set('loginid', loginId)
      });
      return next.handle(modifiedRequest);
    }
    return next.handle(request);
  }
}

Don't forget to register the interceptor in your app.module.ts:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

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