时间戳

首页 > 解决方案 > 在角度 8 上刷新页面不显示来自后端 api 的数据

angular - 在角度 8 上刷新页面不显示来自后端 api 的数据

问题描述

我正在从后端获取数据并将其显示在 mat 表中，该表在延迟加载模块内的组件上呈现。一切似乎都工作正常，直到我从浏览器刷新页面（或者它在 ng serve 运行并且我正在编码时自行刷新，顺便说一句，这就是我发现错误的方式）。

刷新页面时，从 API 获取的数据不再显示。它在从不同页面导航时起作用。

我在后端使用 Django REST 框架为 Angular 客户端提供 API。我的应用程序使用 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/ 不再存在。

标签： angularfirebasedjango-rest-frameworkfirebase-authenticationangular8

解决方案

问题出在以下行：this.afAuth.auth.currentUser.getIdToken()

currenUser 可以为空，我们需要 afAuth.authState

详细答案可以在以下链接中找到：

如何在 Angular Firebase 中修复浏览器刷新时的“TypeError：无法读取 null 的属性‘getIdToken’”？

推荐阅读