在 angular 8 上刷新頁面不顯示來自后端 api 的數據

Question

我正在從后端獲取數據並將其顯示在 mat 表中，該表在延遲加載模塊內的組件上呈現。 一切似乎都工作正常，直到我從瀏覽器刷新頁面（或者它在 ng serve 運行並且我正在編碼時自行刷新，順便說一句，這就是我發現錯誤的方式）。

刷新頁面時，從 API 獲取的數據不再顯示。 它在從不同頁面導航時起作用。

我在后端使用 Django rest 框架為 API 提供給 ZD18B8624A0F5F721DADD7B82 客戶端。 我的應用在后端使用 JWT 對用戶進行身份驗證，在前端使用 firebase。

我正在使用 Http 攔截器將 JWT 令牌添加到所有 Http 請求中。

auth.service.ts 獲取令牌

getToken() {
   let tokenPromise = new Promise ((resolve, reject) => {
    this.afAuth.auth.onAuthStateChanged( user => {

      if (user) {

        this.afAuth.auth.currentUser.getIdToken()
         .then(token => {
           this.userToken = token;
         });
      }

      if (this.userToken) {
        resolve(this.userToken);
      }

    });
   });

   return tokenPromise;

  }

api.service.ts 發送 http 請求

public getEmployees(): Observable<Employee[]> {
    return this.http.get<Employee[]>(`${this.url}/employee/`);
  }

token-interceptor.service.ts 用於添加令牌

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {


  constructor(private authService: AuthService) { }

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

    return from(this.authService.getToken()).pipe(
      switchMap(token => {
          const headers = req.headers
              .set('Authorization', 'JWT ' + token)
              .append('Content-Type', 'application/json');
          const reqClone = req.clone({
              headers
          });
          return next.handle(reqClone);
      }));
 }
}

在 Chrome 瀏覽器開發工具的網絡選項卡上，我可以看到在正常導航中獲取了 employee/，但是當刷新瀏覽器時，employee/ 不再存在。

Answer 1

問題出在以下行：this.afAuth.auth.currentUser.getIdToken()

currenUser 可以是 null 我們需要 afAuth.authState

詳細答案可以在以下鏈接中找到：

如何在 angular firebase 中修復“TypeError: Cannot read property 'getIdToken' of null”？