I am new to Ember.js and I am currently working on a vehicle app. I have done the login part in which I have an HTTP Post request with fetch which has credentials : 'include' in the init object and send it to the server, which is remote. On a successful login the user is transitioned to the home page where there are three option buttons: vehicles, logout and Profile Data. Moreover, cookies are set as the login response has a set-cookie header. At the moment I am not using the vehicles button, but the other two do not work as expected. For them I have made two other http fetch request in which I have credentials : 'include' in the init object but I assume that I cannot access the cookies in which there is my jsessionId. I tried to read them with document.cookie, but it turned out that jsessionId is HTTP only which means that it cannot be accessed through JavaScript.
If I read the cookies, I could include them in my two fetch requests for logout and getUser I think that then the requests would be successful.
Am I right or not and what should I do ? Thanks for the help in advance.
Here are some of my source files:
components/login.js
import Component from '@ember/component';
import { action } from "@ember/object";
import { tracked } from "@glimmer/tracking";
import {inject as service} from "@ember/service";
export default class LoginComponent extends Component{
@tracked email;
@tracked password;
@service router;
@action
logUser(e){
e.preventDefault();
let userData = {
'email' : this.email,
'password' : this.password
};
let fetchObject = {
method: 'POST',
credentials: 'include',
headers : {
'Content-type' : 'application/json',
},
body : JSON.stringify(userData),
};
fetch('https://gara6.bg/auto-api/users/login', fetchObject)
.then(response =>{
return response.json();
})
.then(data =>{
if(data.statusCode == 'SUCCESS'){
this.redirectHome(data);
}
else{
throw Error('Check your data or connection');
}
})
.catch(error =>{
alert('Unable to log in ! ' + error);
});
}
redirectHome(data){
this.router.transitionTo('home');
}
}
components/login.hbs
<form id='login'>
<label id="label" class="formElement" for="exampleInputEmail1">Email address</label>
<Input class="form-control formElement input" id="exampleInputEmail1" placeholder="Enter email" @value=/><br>
<label id="label" for="exampleInputPassword1">Password</label>
<Input class="form-control formElement input" id="exampleInputPassword1" placeholder="Password" @value=/><br>
<button id='loginLink' class='btn btn-primary btn-lg formElement ' type='submit'>Log In</button>
</form>
templates/home.hbs:
<h1>Welcome User!</h1>
<OptionButtons/>
components/option-buttons.hbs:
<div class="buttonHolder">
<button class='btn btn-primary btn-lg homeButton' type='button' >Log Out</button><br>
<button class='btn btn-primary btn-lg homeButton' type='button'>Vehicles</button><br>
<button class='btn btn-primary btn-lg homeButton' type='button' >Profile Data</button><br>
</div>
components/option-buttons.js
import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { action } from "@ember/object";
export default class OptionButtonsComponent extends Component {
@service router;
@action
userMe(){
let fetchObject = {
method: 'GET',
headers : {
'Content-type' : 'application/json',
},
};
fetch('https://gara6.bg/auto-api/users/me', fetchObject)
.then(response => {
return response.json();
})
.then(data => {
if(data.statusCode == 'SUCCESS'){
console.log(data.data);
}
else{
throw ('Check your internet connection');
}
})
.catch(error =>{
alert('Unable to Log out ! '+ error);
});
}
@action
logOut(){
let fetchObject = {
method: 'POST',
headers : {
'Content-type' : 'application/json',
},
};
fetch('https://gara6.bg/auto-api/users/logout', fetchObject)
.then(response => {
return response.json();
})
.then(data => {
if(data.statusCode == 'SUCCESS'){
this.backToLogin();
}
else{
throw ('Check your internet connection');
}
})
.catch(error =>{
alert('Unable to Log out ! '+ error);
});
}
backToLogin() {
this.router.transitionTo('login');
}
}
Aucun commentaire:
Enregistrer un commentaire