在 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”？