観測

Question

を使用して、複数のAjaxのHTTPリクエストを処理する私が認可のためにJSONウェブトークンを使用して複数のAjaxのリクエストを送信しangular2ウェブサイトを持っている、それは起動時にここで

が、彼らは以下のとおりです。

上

public getUser(): Observable<User> { 
    let headers = new Headers({ 
     'Authorization': 'Bearer ' + this.authService.token.access_token, 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get('http://localhost:5000/api/users/profile', options) 
     .map(response => response.json() as User).catch(this.handleError); 
} 


public getFriends(): Observable<User[]> { 
    let headers = new Headers({ 
     'Authorization': 'Bearer ' + this.authService.token.access_token, 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }); 
    let options = new RequestOptions({ headers: headers }); 
    return this.http.get(`http://localhost:5000/api/users/${this.authService.userId}/friends`, options) 
     .map(response => response.json() as User[]).catch(this.handleError); 
} 

そしてそう

この要求を行うにはアクセストークンが必要です トークンをローカルストレージに保存していますが、トークンは5分で有効になりますが、

ユーザーログインとローカルトークンのリフレッシュトークンがローカルストレージに格納されている場合

ログイン後にブラウザを閉じると5分以上待ってからもう一度ページを開くと、別のリクエストでリフレッシュする必要があります

そしてここでは、主な問題である私たちのリクエスト送信：私たちは、どのようなリクエストが送信されますどのように多くのか分からないので、我々はそれに

ここ

をハードコーディングすることはできませんすることは、更新要求である

public update(): Observable<boolean> { 
     let headers = new Headers({ 
      'Accept': 'application/json', 
      'Content-Type': 'application/x-www-form-urlencoded' 
     }); 


     let options = new RequestOptions({ headers: headers }); 
     return this.http.post('http://localhost:5000/api/auth/token', "refresh_token=" + encodeURIComponent(this.token.refresh_token) + "&grant_type=refresh_token", options) 
      .map((response: Response) => { 

       let token = response.json(); 
       if (token) { 
        this.token = token; 
        localStorage.setItem('currentUser', JSON.stringify({ 
         token: this.token, 
         userId: this.userId 
        })); 
        return true; 
       } 
       else { 
        return false; 
       } 
      }).catch(this.handleError); 

} 

somethiならNGは次のように：

私たちは私たち

のみ送信するために良いものにはなりません「更新」要求の多くをお送りしますので、それは助けにはなりません

this.authService.update().flatMap(this.getUser); 

「更新」要求は」勝ちました「更新」と他の多くのリクエストを送信するために役立ちます

この問題の解決方法は何ですか？

Answer 1

ローカルトークンにアクセストークンを格納することは安全でないとみなされます。どのローカルスクリプトでもアクセスできます。

あなたが要求するものではありませんが、私はhttpのみのクッキーを使用することをお勧めします。クッキーには有効期限が設定されているため、要件を満たすのに役立ちます。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly 

このCookieは、HTTPXMLRequest（角度/ HTTPの基本アクセス）によって自動的に送信されます。

トークンの有効期限が切れているため、要求が失敗した時はいつでもその後、あなたがキャッチすることができ、別のトークンを生成し、再試行してください：

http.get(...) 
    .catch(obs => { 
     return refreshToken().mergeMapTo(obs); 
    }) 

それはHTTPのみですので、何のスクリプトがアクセスすることはできません、それはする必要がある理由ですそれが失敗した後にやり直してください。つまり、事前に把握することができます。