dimanche 14 mars 2021

Still receiving 401 unauthorized after including credentials : 'include' in HTTP requests

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