【问题标题】:Nuxt Auth - User Data not setNuxt Auth - 未设置用户数据
【发布时间】:2019-03-05 16:20:24
【问题描述】:

我尝试通过 nuxt-auth 模块登录。作为响应,我得到了令牌,然后传递了用户数据。但是,this.$Auth.loggedInfalsethis.$Auth.userundefined。我已经战斗了3天,不能再继续下去了。希望有人可以帮助我。

登录

await this.$auth.login({
    data: {
        email: this.email,
        password: this.password
    }
}).then(() => {
    this.$router.push('/dashboard')
}).catch(err => {
    this.snackbar.show = true;
})

nuxt.config.js

auth: {
    strategies: {
        local: {
            endpoints: {
                login: {
                    url: '/auth/login',
                    method: 'post',
                    propertyName: 'access_token'
                },
                logout: {
                    url: '/auth/logout',
                    method: 'post'
                },
                user: {
                    url: '/auth/me',
                    method: 'post'
                },
                tokenRequired: true
            }
        }
    }
}

响应登录

{
"access_token": "xxxxxxxxxxxxx.eyJpc3MiOiJodHRwczpcL1wvYXBpLmFwcHJlexxxxxxxcxXRoXC9sb2dpbiIsImlhdCI6MTUzODI5NTczMywiZXhwIjoxNTM4Mjk5MzMzLCJuYmYiOjE1MzgyOTU3MzMsImp0aSI6ImdtWWVyZTViQjk1cU5BRG8iLCJzdWIiOjIsInBydiI6IjYwODM2NzQ0MzQ4ZDQzMTk4NzE4N2ZjMWM2YzIzMjYxMDcyMWE5ZjAifQ.JhOiwIg7StzZR71aqYyI9rJpPXVclmddzPSIwqCIUN4",
"token_type": "bearer",
"expires_in": 3600
}

回复用户

{
    "id": 2,
    "name": "Dominik Dummy",
    "email": "dummy@andreas-pabst.de",
    "created_at": {
        "date": "2018-09-28 09:11:31.000000",
        "timezone_type": 3,
        "timezone": "UTC"
    },
    "updated_at": {
        "date": "2018-09-28 09:11:31.000000",
        "timezone_type": 3,
        "timezone": "UTC"
    },
    "self": "https:\/\/api.apprex.de\/api\/users\/2"
}

【问题讨论】:

  • 您确定需要发布请求来获取用户吗?如果是这样 - 如果用户完成请求,请检查网络。

标签: authentication axios vuex nuxt.js


【解决方案1】:

auth-next 更新": "^5.0.0"

您必须设置property: false 而不是propertyName。 所以你的 nuxt.config.js 可能如下:

auth: {
    strategies: {
      local: {
        token: {
          property: 'access_token',
          required: true,
          type: 'Bearer'
        },
        user: {
          property: false, // <--- Default "user"
          autoFetch: true
        },
        endpoints: {
          login: { url: 'api/login', method: 'post' },
          logout: { url: 'api/auth/logout', method: 'post' },
          user: { url: 'api/user', method: 'get' }
        }
      }
    }
  },

【讨论】:

  • 感谢您发布更新的答案?
  • 我想避免向user 端点发出额外请求。为此,我还需要将endpoints.user 设置为false。正如文档所说:“...除非您使用 endpoints.user: false 禁用用户端点,否则您仍然需要实现用户端点,以便身份验证可以在例如页面刷新时获取用户信息。” (auth.nuxtjs.org/schemes/local/#user)
【解决方案2】:

好的,经过长时间的尝试,我终于解决了。问题是auth.fetchUser() 在用户响应中需要一个属性user,而我的用户响应中不存在该属性。我在 nuxt.config.js 中将 propertyName 设置为 false,现在它可以工作了

*nuxt.config.js

auth: {
strategies: {
    local: {
        endpoints: {
            login: {
                url: '/auth/login',
                method: 'post',
                propertyName: 'access_token'
            },
            logout: {
                url: '/auth/logout',
                method: 'post'
            },
            user: {
                url: '/auth/me',
                method: 'post',
                propertyName: false // <--- Default "user"
            }
        }
    }
}
}

目前我不确定这是否是模块中的故障

【讨论】:

  • 请注意,我看到的一些教程说将 propertyName 设置为 undefined — 这不起作用。你的答案是唯一对我有用的!
  • 你节省了我的时间
【解决方案3】:

您应该调用this.$auth.fetchUser() 来填充user 数据和loggedIn 中的auth 存储Docs

【讨论】:

  • 是的,我知道,但我认为您想手动调用它,如果您有来自self API 的响应,那就太好了,您可以在获得调试响应后重新加载页面如果用户对象在重新加载后填充,请确保您 this.$auth.fetchUser() 确实有效,否则由于未调用 fetchUser 函数而导致麻烦
  • 感谢这个功能!如果我们要在后端更新用户数据,则需要调用它
猜你喜欢
  • 2019-09-08
  • 2021-02-07
  • 2019-05-02
  • 2021-12-20
  • 2022-11-28
  • 2021-03-02
  • 2021-09-11
  • 1970-01-01
  • 2021-10-24
相关资源
最近更新 更多