使用 NuxtJS Axios 的 Feedly API答案

【问题标题】：Feedly API with NuxtJS Axios使用 NuxtJS Axios 的 Feedly API
【发布时间】：2020-03-21 09:19:16
【问题描述】：

我正在尝试通过我的 nuxtjs 网站访问 Feedly API。为此，我使用了nuxt-axios 模块。

首先，我记下 Feedly API 说明：

我们提供标准 OAuth 2.0 身份验证模块，该模块为应用程序提供 OAuth 访问令牌。大多数端点都需要一个 Authorization 标头。

$ curl -H 'Authorization: OAuth [你的开发者访问令牌]' https://cloud.feedly.com/v3/profile

我现在尝试将其集成到 nuxtjs-axios 中。

首先，我设置了我的nuxt-config.js 文件：

export default {
  ...
  plugins: [{ src: `~/plugins/axios.js` }],
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    credentials: true
  },

  env: {
    FEEDLY_ACCESS_TOKEN:
      [MY_FEEDLY_DEV_ACCESS_TOKEN]
  },
  ...
}

然后我在plugins 文件夹中创建一个axios.js 插件（导入到我上面提到的nuxt-config.js 文件中）：

export default function({ $axios }) {
  $axios.setHeader('Authorization', `OAuth ${process.env.FEEDLY_ACCESS_TOKEN}`)
}

问题是我不知道我应该在axios.js 插件文件中放什么 --- 或者即使这是正确的方法。我所做的实际上只是在黑暗中刺伤。

所以我的问题是，如何使用 nuxtjs-axios 模块将 Feedly API 实现到 nuxtjs 中？

谢谢。

【问题讨论】：

标签： vue.js axios nuxt.js feedly

【解决方案1】：

使用拦截器：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

https://github.com/axios/axios/blob/master/README.md#interceptors

【讨论】：

【解决方案2】：

我对 nuxt-axios 文档的理解是 plugin.axios 文件用于添加“默认”行为（axios 助手：https://axios.nuxtjs.org/helpers/）

我认为你的插件是正确的（如果令牌是你唯一需要添加到标题中的东西）。

启用 nuxt-axios 后，您现在可以使用 this.$axios.get/post。

您是否尝试过运行组件：

this.$axios.get('**feedly_url_api_url_here**').then(response)....

【讨论】：