设计令牌身份验证 - 如何使用 javascript 访问响应 header 信息？

Question

我正在开发一个 Web 应用程序，使用 rails 作为后端 API 并使用 vue.js 作为前端库。为此，在身份验证期间，我使用 devise_token_auth 库。现在它似乎在响应的 header 中发送令牌信息，我不知道如何使用 javascript.

进行检索

我还展示了他们有单独的库，比如 J-toker， ng-token-auth, angular2-token ..etc 从他们那里我跟随 jtoker auth 因为我想用它来使用 vue.js。但它似乎需要 React 组件。在这里，我附上了使用 Postman 获得的回复。

回复Body：

{"data":{"id":3,"email":"contact@dazzlebirds.com","provider":"email","uid":"contact@dazzlebirds.com","name":null,"image":null}}

响应 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

Answer 1

您需要拦截所有 request/response 调用和 include/retrieve header 与 access-token。配置headers可以保存在浏览器的localstorage中以保持连接。

您可以使用任何基于 promise 的 http 客户端来实现此目的，对于下面的示例，我将使用 axios。

您首先需要在 vue 应用程序的 main.js 文件中导入 axios。

import axios from 'axios'

然后您可以将请求拦截为

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)
});

设计令牌身份验证 - 如何使用 javascript 访问响应 header 信息？

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

javascript

authentication

ruby-on-rails

devise

vue.js