Angular 12 TypeError：无法在 HttpHeaders.applyUpdate 处读取 null 的属性（读取“长度”）

Posted 2023-03-31

【中文标题】Angular 12 TypeError：无法在 HttpHeaders.applyUpdate 处读取 null 的属性（读取“长度”）

【英文标题】：Angular 12 TypeError: Cannot read properties of null (reading 'length') at HttpHeaders.applyUpdate

【发布时间】：2021-09-23 13:52:12

【问题描述】：

我在 Angular 服务中发出 http 请求时收到此错误消息。这仅在我注销时发生，但当我登录时错误消失：

这是我的身份验证服务：

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';
import  Observable, throwError  from 'rxjs';
import  catchError, retry, map  from 'rxjs/operators';
import  JwtHelperService  from '@auth0/angular-jwt';

export interface ServerResponse 
  success: boolean;
  msg: string;
  user: any;
  token: any


@Injectable(
  providedIn: 'root'
)

export class AuthService 

    authToken: any;
  user: any;
    public baseUri: string = 'http://localhost:3000/users';
    public headers = new HttpHeaders().set('Content-Type', 'application/json')

  constructor(private http: HttpClient)  

  public registerUser(user): Observable<ServerResponse> 
    return this.http.post<ServerResponse>(this.baseUri + '/register', user,  headers: this.headers );
  

  public authenticateUser(user): Observable<ServerResponse> 
    return this.http.post<ServerResponse>(this.baseUri + '/authenticate', user,  headers: this.headers );
  

  public getProfile(): Observable<ServerResponse> 
    this.loadToken();
    const head = this.headers.append('Authorization', this.authToken);
    return this.http.get<ServerResponse>(this.baseUri + '/profile',  headers: head );
  

  public storeUserData(token, user) 
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
  

  public loadToken() 
    const token = localStorage.getItem('id_token');
    this.authToken = token;
  

  public loggedin() 
    if (localStorage.id_token == undefined )
      return false;
     else 
      const helper = new JwtHelperService();
      return !helper.isTokenExpired(localStorage.id_token);
    
  

  public logout() 
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  

这是我的注销功能在我的组件中的样子：

import  Component, OnInit  from '@angular/core';
import  AuthService  from '../Services/auth.service';
import  PostService  from "../Services/post.service";
import  Router  from '@angular/router';
import  FlashMessagesService  from 'angular2-flash-messages';
//declare var anime: any;

@Component(
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
)
export class HeaderComponent implements OnInit 
  public isMenuCollapsed = true;
  username;
  postAuthor: string;
  posts: any;

  constructor(
    public authService: AuthService,
    private flashMessage: FlashMessagesService,
    private postService: PostService,
    private router: Router)  

 ngOnInit(): void 

onLogoutClick() 
    this.authService.logout();
    this.flashMessage.show('You are logged out', cssClass: 'alert-success', timeout: 2000);
    this.router.navigate(['login']);
    return false;
  

错误日志如下所示：

core.js:6456 ERROR TypeError: Cannot read properties of null (reading 'length')
    at HttpHeaders.applyUpdate (http.js:236)
    at http.js:208
    at Array.forEach (<anonymous>)
    at HttpHeaders.init (http.js:208)
    at HttpHeaders.forEach (http.js:271)
    at Observable._subscribe (http.js:1713)
    at Observable._trySubscribe (Observable.js:42)
    at Observable.subscribe (Observable.js:28)
    at innerSubscribe (innerSubscribe.js:67)
    at MergeMapSubscriber._innerSub (mergeMap.js:57)

我无法弄清楚为什么会发生此错误。尽管一切似乎都运行良好。任何帮助是极大的赞赏。非常感谢。

【问题讨论】：

请分享错误日志

我刚刚发布了错误日志。

哪个 api 调用给出了这个错误？我可以看到在调用logout 时没有 api 调用。你能告诉你什么时候收到这个错误吗？

我在退出服务时收到此错误。当我点击注销按钮时，就会发生此错误。我正在调用我的注销和登录服务。

【参考方案1】：

根据我看到的错误，如果您也看到错误，它指向您的 HttpHeaders。问题是您在注销时将令牌设置为空。现在正是由于这个原因，您只有在注销时才会收到此错误，而不是在登录时（因为在您登录时存在令牌）。

仅当令牌可用时才设置标题。请尝试以下操作：

if(token)  then set your header only 

【讨论】：

感谢您的回复。你能告诉我应该在哪里使用这个 if 语句。在我的注销功能中？

不在您的 logOut 中，而是在您附加头部的位置（我认为它的 loadToken，无论何时传递令牌）。仅当令牌不为空时才附加它。如果仍有问题，请先这样做。

@WahabShah 我假设在您的 getProfile 方法中，您可以在标题中附加一个令牌。