Angular 5+中如何在模块级别访问SharedService？

别担心，刚接触Angular 5和TypeScript的时候，这种问题真的太常见了！我来一步步帮你解决如何访问存储的登录信息并注入到REST请求里～

1. 先确保登录信息被妥善存储 #

首先，你需要在登录成功后把用户的认证信息（比如JWT Token、用户ID等）存储起来，既可以存在内存里（方便快速访问），也可以存在localStorage里（防止页面刷新后丢失）。

比如在你的认证服务里补充这些逻辑：

// auth.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUser: any; // 内存中存储用户信息/Token

  constructor(private http: HttpClient) {}

  login(username: string, password: string) {
    return this.http.post('你的WordPress登录API地址', { username, password })
      .subscribe((response: any) => {
        // 假设接口返回包含token的用户数据
        this.currentUser = response;
        // 同时存入localStorage做持久化
        localStorage.setItem('currentUser', JSON.stringify(response));
      });
  }

  // 获取当前登录用户信息的方法
  getCurrentUser() {
    // 优先从内存取，没有的话从localStorage加载
    if (!this.currentUser) {
      const storedUser = localStorage.getItem('currentUser');
      if (storedUser) {
        this.currentUser = JSON.parse(storedUser);
      }
    }
    return this.currentUser;
  }

  // 登出方法
  logout() {
    this.currentUser = null;
    localStorage.removeItem('currentUser');
  }
}

2. 创建HTTP拦截器自动注入认证信息 #

Angular的HttpClient支持拦截器，可以自动给所有REST请求添加认证头，不用每次手动写。我们来写一个拦截器：

// auth.interceptor.ts
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<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 获取存储的用户信息
    const currentUser = this.authService.getCurrentUser();
    
    // 如果存在有效的token，就克隆请求并添加Authorization头
    if (currentUser && currentUser.token) {
      request = request.clone({
        setHeaders: {
          // WordPress REST API常用Bearer Token格式，根据你后端配置调整
          Authorization: `Bearer ${currentUser.token}`
        }
      });
    }

    // 继续处理请求
    return next.handle(request);
  }
}

3. 在模块中注册拦截器 #

最后要把拦截器注册到你的根模块（比如AppModule）里，这样它才能生效：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
import { AuthService } from './auth.service';

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  providers: [
    AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 确保你的WordPress后端已经配置了支持JWT认证的插件（比如JWT Authentication for WP REST API），并且设置了正确的密钥和CORS规则。
• 如果你的后端用的是Basic Auth，那Authorization头的格式会是Basic bG9naW46cGFzc3dvcmQ=（登录名和密码base64编码后的结果），你可以调整拦截器里的头部格式。
• 记得在登出时清除存储的用户信息，避免无效的认证头被发送。

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