Question

Axios 拦截器配置-URL 不一样

2019-02-14

13648

vue.js axios

我在 vue.js 中工作，并使用 axios 向服务器发出请求。我已配置拦截器以将授权令牌添加到请求中。生成令牌的函数需要完整的 url 和协议来创建正确的令牌。我已经创建了我的 axios 实例 http。如果我在 http 调用中使用完整的 url： http.get('http://ediscore.net/api/config/category' 它工作得很好。但是如果我在 axios 级别设置基本 URL： const http = axios.create({baseURL: 'http://ediscore.net/api', 并且在 axios 调用中我只使用 http.get('config/category') 我有一个问题。来自拦截器属性的 url 不完整。

我的拦截器：

http.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    console.log('Axios interceptor => config: ', config);
    console.log('Axios interceptor => config.url: ', config.url);
    const token: string = authService.getHmacToken(config.url, config.method);
    if (token) {
      config.headers.Authorization = `${token}`;
    }
    return config;
  },
  (error: AxiosError) => Promise.reject(error)
);

拦截器配置的 console.log()：

Axios interceptor => config:  {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 20000, xsrfCookieName: "XSRF-TOKEN", …}
adapter: ƒ xhrAdapter(config)
baseURL: "http://ediscore.net/api"
data: undefined
headers: {Accept: "application/json", Authorization: ""...
maxContentLength: -1
method: "get"
timeout: 20000
transformRequest: {0: ƒ}
transformResponse: {0: ƒ}
url: "http://ediscore.net/api/config/category"
validateStatus: ƒ validateStatus(status)
xsrfCookieName: "XSRF-TOKEN"
xsrfHeaderName: "X-XSRF-TOKEN"
__proto__: Object

拦截器的 config.url 属性的 console.log()：

Axios interceptor => config.url:  config/category

如何在整个配置对象中，我可以看到属性 url： http://ediscore.net/api/config/category （完整，包括协议 - 参见第 11 行）但如果我仅列出其属性 url，我只会得到 config/category ？（这是我发送给令牌生成器的值，这就是为什么它不起作用，因为它缺少 baseURL 部分）。

这对我来说毫无意义。请帮忙，因为我不明白。

Answer 1

您必须创建一个 axios 实例，然后使用该实例与 API 进行交互。

例如，创建 request.js

import axios from 'axios'

const request = axios.create({
  baseURL: 'https://your_api',
})

request.interceptors.request.use(
  request => {
    const token = localStorage.getItem('token')
    if (token) {
      request.headers.Authorization = token
    }
    return request
  },
  error => {
    return Promise.reject(error)
  }
)

export default request

然后在您的组件中：

import request from './request.js'

export default {
  created() {
    request.get('/api_route')
      .then()
      .catch()
      .finally()
  }
}

希望对您有所帮助。