1

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

在 web 项目中，当用户进入登录屏幕，输入电子邮件和密码，然后按保存后，我可以在我的开发人员工具中看到 nuxtjs 框架向{email: "user@email.com", password: "password"}laravel api 的https://example.project.com/api/login. 然后，laravel api 会返回一个 200 响应，并带有这个 payload { 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 如何决定为Authorizationhttp 标头提供什么值？ 这是我现在的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"} });
4

2 回答 2

1

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

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

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

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

于 2021-08-06T10:35:18.050 回答
1

只需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}` };
于 2021-08-06T06:26:45.237 回答