nuxt-community / auth-module

Zero-boilerplate authentication support for Nuxt 2
https://auth.nuxtjs.org
MIT License
1.93k stars 925 forks source link

TypeError: Cannot read properties of undefined (reading 'Authorization') #1826

Closed AlexanderObolonkov closed 1 year ago

AlexanderObolonkov commented 1 year ago

Version

module: 5.0.0 nuxt: 2.15.9

Nuxt configuration

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/auth-next',
],
auth: {
  strategies: {
    local: {
      scheme: 'refresh',
      token: {
        property: 'access',
        maxAge: 1800,
        type: 'Bearer'
      },
      refreshToken: {
        property: 'refresh',
        data: 'refresh',
        maxAge: 60 * 60 * 24 * 30
      },
      endpoints: {
        login: { url: '/api/token/', method: 'post' },
        refresh: { url: '/api/refresh_token/', method: 'post' },
        user: { url: '/api/profile/', method: 'get' },
        logout: false
      },
      tokenRequired: true,
    }
  }
},
axios: {
  baseURL: 'http://localhost:8000'
},

Have a problem. It's been working fine, until today. I understand that it can't define $auth global variable, but how can i fix it?

TypeError: Cannot read properties of undefined (reading 'Authorization') at RequestHandler._requestHasAuthorizationHeader (runtime.mjs?edb1:948:1) at eval (runtime.mjs?edb1:925:1) at async RefreshScheme.login (runtime.mjs?edb1:1193:1)

My request

    async userLogin() {
      try {
        let response = await this.$auth.loginWith('local', { data: this.login })
        console.log(response)
        this.$router.push('/')
      } catch (err) {
        console.log(err)
      }
    }

It doesn't even send request, because $auth is undefined, and it goes through catch.

Everything set to default.

mayconreis commented 1 year ago

I'm having the same problem

Version module: 5.0.0-1667386184.dfbbb54 nuxt: 2.15.8

Nuxt Configuration

modules: ['@nuxtjs/axios', '@nuxtjs/auth-next']

auth: {
    strategies: {
      local: {
        token: {
          property: 'records.token',
          global: true,
        },
        user: {
          property: 'records.user',
        },
        endpoints: {
          login: { url: 'v1/auth/login', method: 'POST' },
          logout: false,
          user: { url: 'v1/users/profile', method: 'GET' },
        },
      },
    },
  },

My Request

async handleLogin() {
      if (this.$refs.loginFormRef) {
        if ((this.$refs.loginFormRef as HTMLFormElement).validate()) {
          try {
            this.$nuxt.$loading.start();
            await this.$auth.loginWith('local', { data: this.loginForm });
          } finally {
            this.$nuxt.$loading.finish();
          }
        }
      }
    }

Debug Property 'Authorization' is not accessible in headers

image image

mayconreis commented 1 year ago

Found my problem. In package.json I had installed axios and @nuxtjs/axios

AlexanderObolonkov commented 1 year ago

Found my problem. In package.json I had installed axios and @nuxtjs/axios

Yep, it works. I didn't know about this conflict between axios`s. Thank you!