Question

我对Angular很陌生。我正在将Angular 6与NGXS一起用于状态管理。

我的NGXS商店有一个user减速器，其接口是

/* src/app/store/models/user.model.ts */
export interface User {
    serverToken? : string;
    // and other unrelated stuff
}

我想在serverToken的{{1}}标头中使用Authorization。

这是我当前的HttpInterceptor代码

HttpInterceptor

所以我的问题是：如果import {Store, Select} from '@ngxs/store'; import {Injectable} from '@angular/core'; import {HttpInterceptor, HttpHandler, HttpRequest, HttpEvent} from '@angular/common/http'; import {Observable} from 'rxjs'; import {User} from '../store/models/user.model'; @Injectable() export class ApiInterceptor implements HttpInterceptor { constructor(private store : Store) {} @Select()user$ : Observable < User >; intercept(req : HttpRequest < any >, next : HttpHandler) : Observable < HttpEvent < any >> { let options = { url: `https://base-url.com/api/${req.url}` }; const serverToken = '???'; if (serverToken) // if not empty options = { ...options, headers: req .headers .set('Authorization', `JWT ${serverToken}`) } const duplicate = req.clone(options); return next.handle(duplicate); } }不为空，如何正确优雅地使用user$来观察serverToken并在HttpInterceptor中使用它？

Answer 1

如果您更喜欢“可观察”的方法，请尝试以下方法：

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

  return this.serverToken$.pipe(
    take(1),
    concatMap(serverToken => {
      if (serverToken) {
        options = {
          ...options,
          headers: req
            .headers
            .set('Authorization', `JWT ${serverToken}`)
        }
        const duplicate = req.clone(options);
        return next.handle(duplicate)
      } else {
        // next() without changing req
        return next(req)
      }
    }
  )
}

您还需要定义一个返回用户令牌的@Selector，并从拦截器类中@Select。

注意：我不熟悉HTTP拦截器，只是根据我在intercept()签名中看到的内容，应用了链接RxJS可观察对象的概念。

Answer 2

我最终使用了NGXS的snapshot功能。不知道这是否是最好的方法。（快照功能在NGXS中可用，但在NGRX中不可用。我不知道如何在NGRX中解决此问题）

在user.state.ts

中

@State < User > ({name: "user", defaults: {}})
export class UserState {
    // ... 

    @Selector()
    static serverToken(user : User) {
        return user.serverToken || '';
    }
}

在HttpInterceptor

中

    const serverToken = this
        .store
        .selectSnapshot(UserState.serverToken);

如何使用HttpInterceptor中NGXS存储中的值？

2 个答案: