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

"Enhancement in Chrome: Inclusion of Origin header in same-origin requests

Iconic slim template for data disabling

Monitoring AJAX POST progress with Node.js and Multipart: XMLHttpRequest

Is there a way for me to retrieve form information?

Merge two separate mongodb records

Running a service in Express.js without being dependent on incoming requests

Disable browser suggestions in Material UI's Autocomplete component

How can you retrieve the index of the outer repeater item within nested ng-repeaters in AngularJS?

Discovering parent elements far up the DOM hierarchy using jQuery

React checkbox remains checked even after uncheckingIs this revised version

Creating a linear video playback system

Issue encountered in loading css and js folders during the build of the Angular2 application due to the files not being found

Showing real-time information from an object

Trouble with the query waypoints extension in a simple demonstration

What steps should I take to enable Google Maps style on mobile devices?

Creating PDFs in iOS and Android using Ionic framework

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

What steps can I take to reset my JavaScript code once its original purpose has been fulfilled?

ES6 throwing an error: SyntaxError due to an unexpected token ")"

Combining JS Tree and Datatables for Enhanced Functionality