HTTP GET in Angular 2はHTTP POSTでログイン用に受信した応答をトリガーします

Question

こんにちは、私はAngular 2をかなり新しくしています。

バックエンドにhttp投稿を行い、自分のトークンを取得するために使用するログイン方法は次のとおりです。それはうまくいく。

public login(username, password) { 

const headers = new Headers({ 
    'Content-Type': 'application/x-www-form-urlencoded', 
    'Authorization': 'Basic ' + btoa('live-test:') 
}); 

const requestOptions = new RequestOptions({ headers }); 

const urlSearchParamsLogin = new URLSearchParams(); 
urlSearchParamsLogin.append('grant_type', 'password'); 
urlSearchParamsLogin.append('client_id', 'live-test'); 
urlSearchParamsLogin.append('username', username); 
urlSearchParamsLogin.append('password', password); 

const paramsLogin = urlSearchParamsLogin.toString(); 

this.http.post(this.urlAuth, paramsLogin, requestOptions) 
    .map(response => response.json().access_token) 
    .subscribe(
    response => { 
     localStorage.setItem('token', response); 
     alert(localStorage.getItem('token')); 
    }, 
    error => { 
     console.log(error.text()); 
    } 
); 
} 

マイcheckToken方法

public checkToken() { 

const token = localStorage.getItem('token'); 

const headers = new Headers(); 
headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
headers.append('Accept', 'application/json'); 

const urlSearchParamsCheckToken = new URLSearchParams(); 
urlSearchParamsCheckToken.append('token', token); 

const paramsCheckToken = urlSearchParamsCheckToken.toString(); 

const options = new RequestOptions({ headers: headers , params: 
paramsCheckToken}); 

this.http.get('http://localhost:8082/cq-webapp/oauth/check_token', options) 
    .map(response => response.json().user_name) 
    .subscribe(
    response => { 
     alert(response); 
    }, 
    error => { 
     console.log(error.text()); 
    } 
); 
} 

} 

checkToken方法は、それが私のJavaのバックエンドからバックそのHTTPレスポンスを取得した後、それが持っている後に、上記の私のログイン方法は、（トークンで別の応答を取得する以外は正常に動作します最初にトークンを取得するためにすでに行われています）。ログインメソッドが別の応答を得るのはなぜですか？私のAngular 2を別の方法で書くことでこの非同期的な行動を防ぐことができますか？

郵便配達員がcheckToken HTTP GETで追加のhttp応答を受信しないため、これは私のSpringバックエンドでは問題ではないと思います。これがAngular 2 Typescriptの問題であることを確かめてください。

助けが必要ですか？

****アップデート、ここに修正がありました。私はまだ前にhtmlがcheckTokenボタンのクリックでログインを引き起こしていた理由を聞くことに興味があります。ここで

<div> 
    <h1>Login</h1> 
    <form role="form" (submit)="login(username.value, password.value)"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <input type="text" #username class="form-control" id="username" 
     placeholder="Username"> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" #password class="form-control" id="password" 
     placeholder="Password"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 

    <button (click)="checkToken()" >Check Token</button> 
    </form> 
</div> 

が

<div> 
<h1>Login</h1> 
<form role="form"> 
<div class="form-group"> 
    <label for="username">Username</label> 
    <input type="text" #username class="form-control" id="username" 
    placeholder="Username"> 
</div> 
<div class="form-group"> 
    <label for="password">Password</label> 
    <input type="password" #password class="form-control" id="password" 
    placeholder="Password"> 
    </div> 
    <button (click)="login(username.value, password.value)">Submit</button> 

    <button (click)="checkToken()" >Check Token</button> 
</form> 
</div> 

Answer 1

checkTokenボタンにtype属性がないためにこの現象が発生しました。 type属性が指定されていない場合、デフォルト値はsubmit（IEを除いて、常にそれを指定する方が良い）です。

ボタンをクリックすると、フォームが送信され、checkToken（クリック）とlogin（送信）の両方が呼び出されました。

参考：https://www.w3.org/TR/html401/interact/forms.html#h-17.5

タイプ=提出|ボタン| [CI]

をリセットこの属性は、ボタンの種類を宣言します。可能な値：

• submit：送信ボタンを作成します。これがデフォルト値です。
• リセット：リセットボタンを作成します。
• button：プッシュボタンを作成します。

Answer 2

使用オブジェクトの代わりに、URLSearchParams

let user ={ 
    grant_type: 'password' 
    client_id: 'live-test' 
    username: username); 
    password':'password' 
} 

this.http.post(this.urlAuth, user, requestOptions); 

後にあなたがコンポーネントに対応するHTMLを購読しているされる前に、ここで

は、HTMLで、サービス自体ではなく、長い時間待つことになります。