Greetings! I am relatively new to Angular 2 and I am encountering some unexpected HTTP behavior.
Below is my login method used to send an HTTP POST request to my backend server and retrieve a token. It is functioning properly.
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());
}
);
}
Now, here is my checkToken method:
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());
}
);
}
}
While the checkToken method is functioning correctly, it seems that after receiving the HTTP response from my Java backend, the login method above is receiving another response with the token. Why is this happening? Is it due to asynchronous behavior in Angular 2, and is there a way to prevent this?
I believe this issue is specific to Angular 2 Typescript rather than my Spring backend, as Postman does not exhibit the same behavior when making a checkToken HTTP GET request.
Any insights or suggestions would be greatly appreciated.
****Update: I have identified the fix. I am still curious as to why the previous HTML structure was causing the login method to trigger upon clicking the checkToken button.
Here is the original HTML structure:
<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>
Here is the corrected HTML structure:
<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>