Nuxt：Auth + Axios设置

如何解决Nuxt：Auth + Axios设置

我正在努力配置auth + Axios。

我目前正在使用我们的社交登录信息（FB和Google）。它一半有效。

首先，我将Axios实例配置为插件。我们确实有两个实例，一个用于通用API请求，另一个用于记录的用户请求。

plugins / axios.js

export default function({ $axios,redirect,app }) {
  $axios.defaults.baseURL = process.env.baseUrl
 
  $axios.defaults.headers = {
    Authorization: `Bearer ${process.env.APIKey}`,Accept: 'application/json','Content-Type': 'application/json',lang: app.i18n.locale
  }

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 400) {
      redirect('/400')
    }
    if (code === 404) {
      redirect('/404')
    }
    if (code === 500) {
      redirect('/500')
    }
  })
}

plugins / auth-axios.js

export default function({ $axios },inject) {
  const authAxios = $axios.create()
  // authAxios.setToken('123','Bearer')

  inject('authAxios',authAxios)
}

第一个客户可以在整个应用程序中完美运行。

现在，我正在配置auth插件。当我通过Facebook或google登录时，我需要从社交网络中获取登录用户的响应数据，并将其发送到我的API，并期望使用令牌的用户作为响应。这将是我将在auth插件中设置的用户。每次我使用Facebook登录时，它都会运行良好，除非它到达插件代码。 $ auth.loggedIn始终为false。

我已经在代码开始时强制$ auth.fetchUser使其起作用，但是它根本无法正常工作。当console.log（$ auth）时，它显示Axios错误。这是我的验证码：

plugins / auth.js

export default async function({ app: { $auth,$axios } }) {
  $auth.fetchUser()
  console.log($auth)
  if (!$auth.loggedIn) {
    return
  }

  const authStrategy = $auth.strategy.name
  if (authStrategy === 'facebook' || authStrategy === 'google') {
    if ($auth.user.google_id || $auth.user.fb_id) return

    try {
      const url = `/client/social`
      var postData
      if (authStrategy == 'facebook')
        postData = {
          name: $auth.user.name,email: $auth.user.email,fb_id: $auth.user.id,avatar: $auth.user.picture.data.url,birthday: $auth.user.birthday
        }
      else
        postData = {
          name: $auth.user.given_name,surname: $auth.user.family_name,google_id: $auth.user.sub,avatar: $auth.user.picture,locale: $auth.user.locale
        }
      const { data } = await $axios.post(url,postData)
      $auth.setToken('client',data.access_token)
      $auth.setUser(data.client)
    } catch (e) {
      console.log(e)
    }
  }
}

console.log（$ auth）错误：

'$state': {
    user: null,loggedIn: false,strategy: 'facebook'
  },error: TypeError: Cannot set property 'Authorization' of undefined
      at Function.setHeader (server.js:1556:42)
      at Oauth2Scheme._setToken (server.js:1014:31)
      at Oauth2Scheme.mounted (server.js:1001:12)
      at Auth.mounted (server.js:516:42)
      at Auth.init (server.js:459:18)
      at module.exports../.nuxt/auth/plugin.js._webpack_exports_.default (server.js:939:16)
      at createApp (server.js:2432:87)
}

我的身份验证模块配置：

import dotenv from 'dotenv'
dotenv.config()

export const auth = {
  plugins: [
    // {
    //   src: '~/plugins/axios',//   ssr: true
    // },{
      src: '~/plugins/auth-axios',ssr: true
    },'~/plugins/auth.js'
  ],redirect: {
    login: '/',callback: '/callback'
  },strategies: {
    local: false,facebook: {
      client_id: '#############',userinfo_endpoint:
        'https://graph.facebook.com/v2.12/me?fields=about,name,picture{url},email,birthday',scope: ['public_profile','email','user_birthday']
    },google: {
      client_id:
        '#####################'
    }
  }
}

似乎登录时尝试进行身份验证以设置Axios令牌（当我注销时也尝试将其删除），但失败。如果我转到Chrome开发人员工具并对其进行调试，以查看哪个Axios实例正试图为此使用。每次都是主要的Axios实例，应该可以在其中访问它。

DevTools的屏幕截图： Screenshot from DevTools

有人知道我在想什么吗？我可以阻止auth facebook策略更新任何Axios实例吗？或者，我可以指定要更新（设置/删除令牌）的Axios实例吗？

编辑：强制$ auth.fetchUser我的auth插件代码可以正常工作，但存在前面提到的错误。当我尝试注销时，由于尝试自动删除令牌时出现的相同错误而无法正常工作

我已经为这个问题疯狂了两个星期。

非常感谢！

Nuxt：Auth + Axios设置

如何解决Nuxt：Auth + Axios设置

相关推荐