集成 Angular2、Redux 和 JWT

【问题标题】：Integrating Angular2, Redux and JWT集成 Angular2、Redux 和 JWT
【发布时间】：2016-10-21 00:33:10
【问题描述】：

我在使用 Angular2 和 Redux 的应用程序中遇到问题。我决定使用 Redux Observable（自 Angular2 使用 RxJS 以来事物的自然顺序），但 RxJS 对我来说相当棘手。

我正在处理史诗的所有异步/副作用。对我来说很清楚，但现在我需要将 JWT 添加到我的应用程序中，我不知道应该将代码放在哪里来保存和读取令牌？

我做这个动作：

发送 LOGIN_REQUEST。
在史诗中，我向后端 API 发出异步请求，并在响应中获取电子邮件和令牌。
取决于结果，我发送 LOGIN_SUCCESS 或 LOGIN_ERROR。

我认为 2. 和 3. 之间应该有一个额外的点，但我不确定。我应该添加将 JWT 令牌保存到史诗的逻辑吗？

我将非常感谢所有关于这方面的建议以及将 JWT 与 Redux 集成。

【问题讨论】：

标签： angular redux jwt

【解决方案1】：

您应该设置会话并将令牌保存到史诗中的 localStorage - 这是您应该处理所有副作用的地方。

  login = ( action$ ) => {
    return action$.ofType(SessionActions.LOGIN_USER)
      .flatMap(( {user} ) => {
        return this.sessionService.login(user)
          .do(payload => {
            this.sessionService.setSession(payload.json());
          }).map(result => ({
            type: SessionActions.LOGIN_SUCCESS,
            payload: result.json()
          })).catch(error => Observable.of({
            type: SessionActions.LOGIN_ERROR,
            payload: error.json()
          }));
      });
  }

会话服务：

  setSession( user ) {
    this.storage.setItem('auth-user', user);
  }

  isLoggedIn() : boolean {
    return !!this.storage.getItem('auth-user');
  }

【讨论】：

不错！这就是我所要求的。请给我看一下会话服务。我很想看看你是怎么做的:)
这是一个简单的 localStorage.setItem 函数，这取决于您如何实现会话验证。