带有 SSR 的 Angular 应用程序：来自服务器的错误“无效令牌”答案

【问题标题】：Angular app with SSR: error 'Invalid token' from server带有 SSR 的 Angular 应用程序：来自服务器的错误“无效令牌”
【发布时间】：2023-02-10 15:58:29
【问题描述】：

有一个问题：Angular app + ssr。然后用户重新加载应用程序，- 在弹出窗口（mat-dialog）“无效令牌”中出现错误。令牌从 cookie 中获取。在网络（DevTools）中没有错误。

应用程序模块.ts:

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSnackBarModule,
    CookieModule.withOptions(),
    BrowserTransferStateModule,
    StoreModule.forRoot(rootReducer, { metaReducers }),
    EffectsModule.forRoot(rootEffects),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
    NgxMaskModule.forRoot(),
    HttpClientModule,
    ErrorsPopupModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

app.server.module.ts:

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    CookieBackendModule.withOptions(),
    BrowserModule,
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    ServerTransferStateModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {
}

auth.guard.ts:

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(
    private _cookieService: CookieService,
    private _router: Router,
  ) {
  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (this._cookieService.get('token')) {
      console.log('authenticated!..');
      return true;
    } else {
      console.log('Not authenticated!');
      return this._router.createUrlTree(['auth']);
    }
  }
}

auth.interceptor.ts:

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private _cookieService: CookieService,
    private _errorsService: ErrorsService,) {
  }

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    const token = this._cookieService.get('token');
    if (
      !req.url.includes('login')
      && !req.url.includes('restore_password')
      && !req.url.includes('verify')
      && !req.url.includes('register')
      && !req.url.includes('spheres')
    ) {
      if (token)
        return next.handle(req.clone({
          setHeaders: {
            'Authorization': token,
          },
        })).pipe(
          catchError((err: HttpErrorResponse) => {
            console.log('intercept:', err);
            this._errorsService.openPopup(err)
            return []
          }));
    }
    return next.handle(req)

  }
}

应用程序有一个 SSR。然后在没有我的数学模块（弹出窗口）的情况下进行 html 渲染 - 对话框不起作用（关闭弹出窗口的方法不调用）

【问题讨论】：

标签： angular server-side-rendering

【解决方案1】：

这篇文章可能对解决方案有用： send token to server in angular universal

但我们决定原则上放弃 SSR，因为 seo 的无用性和潜在的内存泄漏/ 例如：How to remove Angular Universal on angular project

【讨论】：