在 Angular 2 中处理过期的 cookie答案

【问题标题】：Handling expired cookie in Angular 2在 Angular 2 中处理过期的 cookie
【发布时间】：2016-08-17 07:22:56
【问题描述】：

我正在尝试使用 Angular 2 并尝试使用 document.cookie 作为我的访问令牌存储。

我所做的是设置了一个访问令牌和 30 分钟到期的 cookie。现在应用程序将在加载时设置 cookie，以便后续 api 进程处理得很好，直到 30 分钟。我的问题是我想检查 cookie 是否过期，然后获取新的 accesstoken 并将其设置为 cookie 并调用相应的方法。

这是我的代码

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable, Operator} from 'rxjs/Rx';

import { AccessToken } from './access-token.service';


@Injectable()
export class DataService {  

  constructor(
      private _accessToken : AccessToken,
      private _http: Http
  ) {}

  request(url:string){
      var token = this._accessToken.readCookie();
      return this._http.get(url,{
          headers : new Headers({
              "Authorization" : "Bearer " + token
          })
      })
          .map(data => data.json().result)
          .catch(this._handleError)

  }

  fetchData(dataurl:string){
     var token = this._accessToken.readCookie();

     if(!token){        
        this._accessToken.getToken()
            .subscribe(
                response => {
                    this._accessToken.setCookie(response);                  
                }
            )
            // I want to call this.request() after the accesstoken has been set to the document.cookie

      } else {
            return this.request(dataurl)
      }
  }

  getAllProducts(){
      return this.fetchData('https://localhost/api/products');
  }


  private _handleError (error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
  }
}

this._accessToken.getToken() 方法向端点发出 http.post 请求并获取访问令牌。然后this._accessToken.setCookie() 方法设置一个document.cookie，其accesstoken 和过期时间为30 分钟。

我不确定在 cookie 过期的情况下如何对 fetchData() 方法进行排序，以便它首先获取 accesstoken 将其设置为 cookie，然后只调用 request 方法。

谢谢

【问题讨论】：

这听起来不像是一个安全的解决方案。我认为您应该更喜欢 Angular2 JWT (youtube.com/watch?v=fDHihQ5hB5I) 之类的东西，其中客户端中的 JS 甚至无法访问令牌，但它仍然随每个请求一起发送到服务器。另见npmjs.com/package/ng2-jwt、auth0.com/blog/…（不知道什么包最适合TS，因为我自己只使用Dart）。
我也这么认为。这只是一个实验性的东西。由于该过程用于身份验证，因此在考虑了一下之后，如果我使 api 调用请求同步，您认为这是一个好主意吗？你知道我如何使 http.get 同步吗？？
无法同步。
太糟糕了。所以知道我应该如何处理这种情况，以便我可以在任何调用之前检查过期的 cookie。非常感谢。

标签： javascript cookies angular observable

【解决方案1】：

只需将调用移动到subscribe(...) 回调中

if(!token){        
    this._accessToken.getToken()
        .subscribe(
            response => {
                this._accessToken.setCookie(response);                  
                // I want to call this.request() after the accesstoken has been set to the document.cookie
            }
        )

  } else {

【讨论】：