Lose user data in Nuxt-auth fetchUser CustomStrategy

Question

Hi everyone! I have my own custom strategy to get token, and all is good, but when a refresh page I lose user data and fetchUser does not works. It doesn´t send the params to API to get again the user data. the workflow is next: 1- send params to token api and get token 2- send params to login API to get the user

//nuxt.config.js

customStrategy: {
        _scheme: '~/schemes/customScheme',
        endpoints: {
          login: {
            url: '/api/v1/token',
            method: 'post',
            propertyName: 'token',
            headers: {'x-channel-id': 1}
          },
          user: {
            url: '/api/v1/login',
            method: 'post',
            propertyName: false,
            headers: {'x-channel-id': 1}
          },
          logout: null
        }
      }

customScheme.js

import LocalScheme from '@nuxtjs/auth/lib/schemes/local'

export default class CustomScheme extends LocalScheme {

  _setToken (token) {
    if (this.options.globalToken) {
      // Set Authorization token for all axios requests
      this.$auth.ctx.app.$axios.setHeader(this.options.tokenName, token)
    }
  }
  
  _clearToken () {
    if (this.options.globalToken) {
      // Clear Authorization token for all axios requests
      this.$auth.ctx.app.$axios.setHeader(this.options.tokenName, false)
    }
  }
  
  mounted () {
    if (this.options.tokenRequired) {
      const token = this.$auth.syncToken(this.name)
      this._setToken(token)
    }
    return this.$auth.fetchUserOnce()

  }

  async login (endpoint) {
    if (!this.options.endpoints.login) {
      return
    }

    // Get token
    const result = await this.$auth.request({
      ...endpoint
    },
      this.options.endpoints.login
    )

    // Set token
    if (this.options.tokenRequired) {
      const token = this.options.tokenType
        ? this.options.tokenType + ' ' + result
        : result
        
      this.$auth.setToken(this.name, token)
      this._setToken(token)
    }

    // If result I get and set user
    if (result) {
      const user = await this.$auth.request({
        ...endpoint
      },
        this.options.endpoints.user
      )
      this.$auth.setUser(user);
    }
  }
  
  async fetchUser (endpoint) {
    // User endpoint is disabled.
    if (!this.options.endpoints.user) {
      this.$auth.setUser({})
      return
    }
    
    // Token is required but not available
    if (this.options.tokenRequired && !this.$auth.getToken(this.name)) {
      return
    }
    
    // Try to fetch user and then set
    try{
      const user = await this.$auth.requestWith(
        this.name,
        endpoint,
        this.options.endpoints.login
      )

      this.$auth.setUser(user)
    } catch (error){
      console.log(error)
    }
  }
}

When I set this.$auth.setUser(user) in login() method all is fine and app redirect me to /dashboard page and the user information (like role and email) is displayed on navBar but when I refresh page I lose user data. The app try to fetchUser but it give me a 400 error because user and password not sent. Another thing I don´t understand is Why endpoint parameter is undefined in async fetchUser (endpoint) ??? . I think there is an issue in this part.

I hope u can help me Regards

Answer 1

我只是删除了所有这些库并进行了自己的自定义 Nuxt 身份验证https://nemanjadragun92.medium.com/nuxt-js-custom-authentication-245d2816c2f3