Using Ionic to send HTTP requests with authentication headers

Question

Using Ionic to send HTTP requests with authentication headers

I'm encountering an issue with Ionic where it insists on sending a pre-fetch request to the server without a JWT token, causing the app to crash. Additionally, I need a way to capture non-200 responses from the server as it frequently returns errors like 403 {message: Account Invalid}.

Code

auth.js

import { Headers, RequestOptions } from '@angular/http'
import 'rxjs/add/operator/toPromise';
...
export const getToken = function(http){
    return new Promise((resolve, reject) => {
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Authorization', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4Yzg1MmI1YmQ1NjE1MGJkMDAxZWEzNyIsImlhdCI6MTQ4OTY3ODE0NywiZXhwIjoxNDg5NjgxNzQ3fQ.zUWvBnHXbgW20bE65tKe3icFWYW6WKIK6STAe0w7wC4');
        let options = new RequestOptions({headers: headers});
        http.get('//localhost:3000/auth/users', {headers: options})
        .toPromise()
        .then(res => resolve(res))
        .catch(err => console.log(err));
    });
}

Chrome console:

Response for preflight has invalid HTTP status code 401

Server sees: (I logged out the request and there are no headers or body)

OPTIONS /auth/users 401 25.613 ms - -

angularjs typescript ionic2

Answer 1

Answer №1

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Toast, Device } from 'ionic-native';
import { Http, Headers } from '@angular/http';     
let headers = new Headers();
      headers.append('Token', this.Token);
      headers.append('id', this.ID);

      this.http.get(this.apiUrl + this.yourUrl, { headers: headers })
        .map(res => res.json())
        .subscribe(
        data => {
          console.log(data);
          if (data.code == 200) { // handling responses with code 200
            if (data.result.length > 0) {
              for (let i = 0; i < data.result.length; i++) {
                var userData = {
                  username: data.result[i].username,
                  firstName: data.result[i].firstName,
                  lastName: data.result[i].lastName,
                }
                console.log(JSON.stringify(userData));
                this.Results.push(userData);
              }
            }


          }
          else { // handling non-200 responses
            console.log(data.message);
          }

          this.user= this.Results;

          console.log(this.user);
        },
        err => {

          console.log("ERROR!: ", err);
        });

This approach allows you to manage all backend responses effectively.

I trust this solution will meet your needs.

Answer 2

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Toast, Device } from 'ionic-native';
import { Http, Headers } from '@angular/http';     
let headers = new Headers();
      headers.append('Token', this.Token);
      headers.append('id', this.ID);

      this.http.get(this.apiUrl + this.yourUrl, { headers: headers })
        .map(res => res.json())
        .subscribe(
        data => {
          console.log(data);
          if (data.code == 200) { // handling responses with code 200
            if (data.result.length > 0) {
              for (let i = 0; i < data.result.length; i++) {
                var userData = {
                  username: data.result[i].username,
                  firstName: data.result[i].firstName,
                  lastName: data.result[i].lastName,
                }
                console.log(JSON.stringify(userData));
                this.Results.push(userData);
              }
            }


          }
          else { // handling non-200 responses
            console.log(data.message);
          }

          this.user= this.Results;

          console.log(this.user);
        },
        err => {

          console.log("ERROR!: ", err);
        });

This approach allows you to manage all backend responses effectively.

I trust this solution will meet your needs.

Answer 3

Answer №2

For those experiencing this issue, devanshsadhotra's solution is helpful, but I approached it in a slightly different way:

In my ionic.config.json file, I included all the necessary routes:

  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://localhost:3000/api"
    },
    {
      "path": "/auth",
      "proxyUrl": "http://localhost:3000/auth"
    }
  ]

In the networking file (in my case, auth.js), I made the following changes:

import { Headers } from '@angular/http'  //Include Headers in this object type
import 'rxjs/add/operator/toPromise';  //Convert observable into promise

export const getToken = function(http){  //Pass the Http handler to the function for no particular reason, but it works
    return new Promise((resolve, reject) => {  //Return a promise to handle the response
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Authorization', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4Yzg1MmI1YmQ1NjE1MGJkMDAxZWEzNyIsImlhdCI6MTQ4OTY4MjY2MywiZXhwIjoxNDg5Njg2MjYzfQ.tW8nT5xYKTqW9wWG3thdwf7OX8g3DrdccM4aYkOmp8w');
        http.get('/auth/users', {headers: headers}) //Include body before headers for post, put, and delete requests
        .toPromise()  //Ensure stability!!!
        .then(res => resolve(res)) //If everything goes well....
        .catch(err => console.log(err)); //Handle errors...
    });
}

Answer 4

For those experiencing this issue, devanshsadhotra's solution is helpful, but I approached it in a slightly different way:

In my ionic.config.json file, I included all the necessary routes:

  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://localhost:3000/api"
    },
    {
      "path": "/auth",
      "proxyUrl": "http://localhost:3000/auth"
    }
  ]

In the networking file (in my case, auth.js), I made the following changes:

import { Headers } from '@angular/http'  //Include Headers in this object type
import 'rxjs/add/operator/toPromise';  //Convert observable into promise

export const getToken = function(http){  //Pass the Http handler to the function for no particular reason, but it works
    return new Promise((resolve, reject) => {  //Return a promise to handle the response
        let headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Authorization', 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU4Yzg1MmI1YmQ1NjE1MGJkMDAxZWEzNyIsImlhdCI6MTQ4OTY4MjY2MywiZXhwIjoxNDg5Njg2MjYzfQ.tW8nT5xYKTqW9wWG3thdwf7OX8g3DrdccM4aYkOmp8w');
        http.get('/auth/users', {headers: headers}) //Include body before headers for post, put, and delete requests
        .toPromise()  //Ensure stability!!!
        .then(res => resolve(res)) //If everything goes well....
        .catch(err => console.log(err)); //Handle errors...
    });
}

Using Ionic to send HTTP requests with authentication headers

Answer №1

Answer №2

Similar questions

JS The clipboardData in ClipboardEvent is perpetually void

What is the significance of setting "ResolveJsonModule" to true in the TypeScript compiler options for a node.js project when importing a JSON file?

Having trouble retrieving values from radio buttons in Angular 2 forms

Error in Nuxt/TypeScript: Unable to retrieve this - TS2339: Property 'XXX' is not found on type

An issue was encountered in the karma/config.tpl.ts file at line 13, column 18 - a TS1109 error indicating that an expression was expected. This

Differences Between Angular 2 Reactive Forms and Template Forms

Express throwing module errors

The redirection code is not being executed when calling .pipe() before .subscribe()

The error code TS2345 indicates that the argument type 'Event' cannot be assigned to a parameter type 'string'

Incorporating a unique variant with Tailwind called "

Function arity-based type guard

Exploring Angular: Utilizing URL Parameters for Multiple States

Type arguments cannot be accepted in untyped function calls.ts(2347)

Navigating state and passing data using $state.go, toParams, and $stateParams: A guide

Tips for updating a selected value without altering the reference value

Correctly inputting MongoDB-specific collection methods which are currently defaulting to "any"

Tips for implementing AngularJS tags within Laravel templates

Delete the text in MUI's TablePagination component that displays the number of rows per page and the total rows in the table

The ng-repeat section is not being updated by the data-binding functionality

"Frustrating issue with Firebase-admin dependency farmhash-modern resulting in webassembly error