Q:

devise token auth - how to access response header info using javascript?

I am developing a web app using rails as Backend API and vue.js as frontend library. For that during authentication purpose i use devise_token_auth library. Now It seems that it is sending token info inside the header of the response which i don't know how to retrive using javascript.
I also showed that they have separate library for that like J-toker,
 ng-token-auth, angular2-token ..etc  From them i follow jtoker auth because i want to use vue.js with it. But it seems that it requires React component for that. here I am attaching response which I get using Postman. 
Response Body :
{"data":{"id":3,"email":"contact@dazzlebirds.com","provider":"email","uid":"contact@dazzlebirds.com","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 →contact@dazzlebirds.com

A:

You need to intercept all the request/response call and include/retrieve the header with access-token. The config headers can be saved in localstorage of browser to maintain the connection.
You can use any promise based http client to achieve this, for the example below I'm going to use axios.
You first need to import axios in your main.js file of vue application.
import axios from 'axios'

You can then intercept the requests as
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': authauthHeadersUser['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)
});

