How can JavaScript be used to access response header information in Devise Token Auth?

Question

How can JavaScript be used to access response header information in Devise Token Auth?

Currently, I am in the process of developing a web application using Rails as the backend API and Vue.js as the frontend library. For authentication purposes, I have integrated the devise_token_auth library. However, I am facing difficulty in retrieving the token information sent inside the header of the response when working with JavaScript.

I discovered alternative libraries such as J-toker, ng-token-auth, angular2-token, etc. After looking into them, I decided to follow jtoker auth because I specifically wanted to integrate it with vue.js. However, I soon realized that it requires React components which was not ideal for my project. Below is a sample response obtained using Postman:

Response Body :

{"data":{"id":3,"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b1bdbca6b3b1a692b6b3a8a8beb7b0bba0b6a1fcb1bdbf">[email protected]</a>","provider":"email","uid":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5955544e5b594e7a5e5b4040565f5853485e4914595557">[email protected]</a>","name":null,"image":null}}

Response Header :

Cache-Control →max-age=0, private, must-revalidate
Content-Type →application/json; charset=utf-8
ETag →W/"2af9684eadab13f0efebb27b8e29a7be"
Transfer-Encoding →chunked
Vary →Origin
X-Content-Type-Options →nosniff
X-Frame-Options →SAMEORIGIN
X-Request-Id →41f3df67-574c-4095-b471-a8fd08b85be5
X-Runtime →0.768768
X-XSS-Protection →1; mode=block
access-token →DGoclk9sbb_LRgQrr5akUw
client →7_Lfy0RlEbzkpLOpiQCKRQ
expiry →1516322382
token-type →Bearer
uid →<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f0fcfde7f2f0e7d3f7f2e9e9fff6f1fae1f7e0bdf0fcfe">[email protected]</a>

javascript ruby-on-rails authentication devise vue.js

Answer 1

Answer №1

To ensure seamless communication between the client and server, you must intercept all request/response calls to include or retrieve the access-token from the header. Storing configuration headers in the local storage of the browser helps maintain the connection.

One effective way to achieve this is by using a promise-based HTTP client. In the example provided below, we will utilize axios.

Start by importing axios into your Vue application's main.js file:

import axios from 'axios'

You can then set up request interception as follows:

axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.interceptors.request.use(function (config) {
  const authHeaders = JSON.parse(window.localStorage.getItem('authHeaders'));
  if(authHeaders) {
    config.headers[config.method] = {
      'access-token': authHeaders['access-token'],
      'client': authHeaders['client'],
      'uid': authHeaders['uid']
    };
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  if(response.headers['access-token']) {
    const authHeaders = {
      'access-token': response.headers['access-token'],
      'client': response.headers['client'],
      'uid': response.headers['uid'],
      'expiry': response.headers['expiry'],
      'token-type': response.headers['token-type']
    };
    window.localStorage.setItem('authHeaders', JSON.stringify(authHeaders));
  } else {
    window.localStorage.removeItem('authHeaders');
  }
  return response;
}, function (error) {
  return Promise.reject(error);
});

Answer 2

To ensure seamless communication between the client and server, you must intercept all request/response calls to include or retrieve the access-token from the header. Storing configuration headers in the local storage of the browser helps maintain the connection.

One effective way to achieve this is by using a promise-based HTTP client. In the example provided below, we will utilize axios.

Start by importing axios into your Vue application's main.js file:

import axios from 'axios'

You can then set up request interception as follows:

axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.interceptors.request.use(function (config) {
  const authHeaders = JSON.parse(window.localStorage.getItem('authHeaders'));
  if(authHeaders) {
    config.headers[config.method] = {
      'access-token': authHeaders['access-token'],
      'client': authHeaders['client'],
      'uid': authHeaders['uid']
    };
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  if(response.headers['access-token']) {
    const authHeaders = {
      'access-token': response.headers['access-token'],
      'client': response.headers['client'],
      'uid': response.headers['uid'],
      'expiry': response.headers['expiry'],
      'token-type': response.headers['token-type']
    };
    window.localStorage.setItem('authHeaders', JSON.stringify(authHeaders));
  } else {
    window.localStorage.removeItem('authHeaders');
  }
  return response;
}, function (error) {
  return Promise.reject(error);
});

How can JavaScript be used to access response header information in Devise Token Auth?

Answer №1

Similar questions

What is the best way to display a loading image and temporarily disable a button for 3 seconds before initiating the process of sending post data from another page via

There was an unexpected error in angular.js while trying to work on a calendar widget based on angular-ui-calendar. The error message indicated that the argument 'fn' was expected to be a function but instead received Moment

Creating an ongoing loop endlessly using recursion in node.js

Oops! Looks like the connection has been abruptly cut off from the ASYNC node

The display of Bootstrap Cards may become distorted when incorporating J Query

Display PDF blob in browser using an aesthetically pleasing URL in JavaScript

When an if statement is triggered by an overload of information, it initiates the start of a fresh

Exploring the Integration of Node Modules with React

Vue js parent-child communication using event bus fails to function

Using DIV to "enclose" all the elements inside

You cannot reassign NodeJS global variables

Display additional javascript code for expanding a marquee

Is it possible to verify an email address using a "Stealthy Form"?

Press the key to navigate to a different page

Retrieve the HTML content of all children except for a specific child element in jQuery

Limit the execution speed of a JavaScript function

What could be the reason why my useRouter function isn't working as expected?

Unable to show <LI> elements

JavaScript: Dynamically load a script when a particular <a> element is in an active state

Event triggered when a text input field becomes active (excluding onfocus) in the FireFox browser