时间戳

首页 > 解决方案 > 防止 nuxt auth 将授权标头发送到外部 url

vue.js - 防止 nuxt auth 将授权标头发送到外部 url

问题描述

我想在使用 nuxt auth模块的nuxt项目中使用axios向外部 API 发送 POST 请求。

当用户通过身份验证时，axios 似乎会自动添加一个授权标头（这很好，并且通常在调用我的后端 API 时需要）。但是，在调用外部 API 时，可能不接受标头并导致调用失败。

有没有办法指定应该为哪些 URL 添加或排除 auth 标头？

以下是我的 auth 和 axios 模块的配置nuxt.config

  // Axios module configuration
  axios: {
    baseURL: '//localhost:5000',
  },

  // Auth module configuration
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/login', method: 'post', propertyName: 'token' },
          logout: { url: '/auth/logout', method: 'delete' },
          user: { url: '/auth/user', method: 'get', propertyName: 'user' },
        },
      },
    },
  }

更多背景知识：在我的特定用例中，我想将文件上传到 Amazon S3 存储桶，因此我创建了一个预签名的上传请求，然后想将文件直接上传到存储桶中。只要用户未经过身份验证，这一切都很好。

const { data } = await this.$axios.get('/store/upload-request', {
  params: { type: imageFile.type },
})
const { url, fields } = data
const formData = new FormData()
for (const [field, value] of Object.entries(fields)) {
  formData.append(field, value)
}
formData.append('file', imageFile)
await this.$axios.post(url, formData)

我试图通过请求配置取消设置 Auth 标头：

const config = {
  transformRequest: (data, headers) => {
     delete headers.common.Authorization
  }
}
await this.$axios.post(url, formData, config)

这似乎阻止了添加所有与 formData 相关的标题。headers此外，通过属性或函数在配置中设置任何标头transformRequest都不起作用，这再次导致对外部 API 的调用明显失败（将在没有任何这些特定标头的情况下发送请求）。

当我使用 nuxt axios 模块时，我不确定如何将拦截器添加到 axios 实例，如此处或此处所述。

非常感谢任何有关在哪里找到帮助的帮助或提示:)

标签： vue.jsauthenticationamazon-s3axiosnuxt.js

解决方案

尝试以下

解决方案1，在你的plugins文件夹中新建一个axios实例：

export default function ({ $axios }, inject) {
    // Create a custom axios instance
    const api = $axios.create({
        headers: {
            // headers you need
        }
    })
    // Inject to context as $api
    inject('api', api)
}

在 nuxt.config.js 中声明这个插件，然后你可以发送你的请求：

this.$api.$put(...)

方案二，在plugins/axios.js中声明axios为插件，并根据请求url设置监听器：

export default function({ $axios, redirect, app }) {
    const apiS3BaseUrl = // Your s3 base url here
    $axios.onRequest(config => {
        if (config.url.includes(apiS3BaseUrl) {
            setToken(false)
            // Or delete $axios.defaults.headers.common['Authorization']
        } else {
            // Your current axios config here
        }
    });
}

在 nuxt.config.js 中声明这个插件

我个人使用第一个解决方案，如果有一天 s3 url 改变并不重要。

这是文档

推荐阅读