2016-08-17 55 views
1

我正在尝试使用Angular 2并尝试将document.cookie用作我的访问令牌存储。在Angular 2中处理过期的Cookie

我所做的是我设置了一个cookie,并附带一个accesstoken &到期30分钟。现在应用程序将设置加载的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请求到端点,并得到一个的accessToken。 然后this._accessToken.setCookie()方法设置一个document.cookie,其accesstoken和过期时间为30分钟。

我不知道我怎么去排序fetchData()方法的cookie过期,以便它首先获取accesstoken将其设置为cookie,然后只调用request方法。

感谢

+0

这听起来不像一个安全的解决方案里面的电话。我认为你应该更喜欢Angular2 JWT(https://www.youtube.com/watch?v=fDHihQ5hB5I),其中客户端中的JS甚至不能访问令牌,但它仍然随每个请求一起发送到服务器。另见https://www.npmjs.com/package/ng2-jwt,https://auth0.com/blog/introducing-angular2-jwt-a-library-for-angular2-authentication/(不知道是什么包是TS最好的,因为我只使用Dart自己)。 –

+0

我也这么认为。这只是一个实验性的事情。考虑了一下,因为这个过程是用于验证的,你认为如果我使api调用请求同步,这是一个好主意。你知道我如何使http.get同步? –

+0

无法使其同步。 –

回答

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 {