nuxtjs 如何/在哪里设置授权标头

Question

我从另一位离开公司的开发人员那里继承了一个 Web 项目。它是用 nuxtjs 和 laravel 构建的，我都不擅长。

在 web 项目中，在用户进入登录屏幕，输入电子邮件和密码，然后按保存后，我可以在我的开发人员工具中看到 nuxtjs 框架在 @987654324 向 laravel api 发送了一个 {email: "user@email.com", password: "password"} @。然后，laravel api 会返回一个 200 响应，并带有此有效负载 { data: { message: "Login successful.", token: "50|Fs88RPU7HON1LnBskm35O9txG0OnXDiG3x4XWILJ" }}。到目前为止一切都很好！

在上面的 200 响应之后，NuxtJS 立即向https://example.project.com/api/auth/user 发送另一个请求，以尝试获取有关此用户的信息。 Nginx 给出 401 响应。我首先怀疑为什么会发生这种情况是因为 NuxtJS 发送了一个Authorization: Bearer undefined，如我的浏览器开发工具的截图所示

我见过Authorization: Bearer [object object] 的其他情况。

我想知道 NuxtJS 如何决定为Authorization http 标头提供什么值？这是我当前的nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'Blah',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],
  },
  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth'
  ],

  auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/api/login',
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login: { url: '/api/login'},
          user: { url: '/api/auth/user'}
        },
      }
    },
    localStorage: true
  },
  proxy: {
    '/api': {
      target: 'https://example.project.com/',
      pathRewrite: { '^/api': '' },
    },
  },


  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'https://example.project.com/',
    credentials: true,
    headers : {
      common: {
        'Accept' : 'application/json'
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

另外，这是pages/login.vue 中启动登录过程的代码行：

await this.$auth.loginWith('local', { data: {email:"user@email.com",password:"password"} });

Answer 1

如下更改您的策略以设置作为响应返回的令牌的属性名称。

strategies: {
  local: {
    token: {
      property: 'token'
    },
    endpoints: {
      login: { url: '/api/login'},
      user: { url: '/api/auth/user'}
    },
  }
},

它将在您使用$axios 的所有请求中包含授权标头。

您可能还需要设置从后端返回的 用户 的属性。

Answer 2

只需在授权请求后添加Authorization 标头作为默认标头即可。假设服务器发送访问令牌作为响应，代码可能如下所示：

const response = await this.$auth.loginWith('local', { 
  data: {
    email: "user@email.com",
    password:"password"
  } 
})
const { token } = response;
axios.defaults.headers.common = { Authorization: `Bearer ${token}` };