如何设置 nuxt $auth.user 的范围（或角色）？

Question

我正在使用带 google oauth2 配置的 nuxt-auth，这是我的 nuxt.config.js 配置：

auth: {
  scopeKey: 'scope',
  strategies: {
    google: {
      client_id: process.env.GOOGLE_KEY,
      codeChallengeMethod: '',
      scope: ['profile', 'email'],
      responseType: 'token id_token'
    }
  },
  redirect: {
    login: '/login',
    logout: '/logout',
    home: '/',
    callback: '/welcome'
  }
},
router: {
  middleware: ['auth']
},

我用这个代码登录

this.$auth.loginWith('google')

我想在成功登录后为用户设置一个角色（访问应用程序数据库），所以我将这段代码添加到我的 welcome.vue（oauth2 回调页面）

<script>
export default {
  mounted () {
    const user = this.$auth.user
    user['scope'] = 'some_role_from_db'
    this.$auth.setUser(user)
  }
}
</script>

但是永远不会调用此代码，因为应用程序会立即重定向到用户在访问登录页面之前选择的页面（welcome.vue html 标记显示 1 秒）。

登录后立即为this.$auth.user设置一些属性的正确方法是什么？在 OAUTH2 身份验证后是否有一些简单的方法可以为用户设置角色？

Answer 1

用户角色必须来自服务器，从客户端定义是错误的，但如果这很重要，你可以这样做：

this.$auth.loginWith('google').then(() => {
    const user = this.$auth.user
    user['scope'] = 'some_role_from_db'
    this.$auth.setUser(user)
})

Answer 2

我已将此部分添加到 nuxt.config.js

中的身份验证对象

rewriteRedirects: false

所以我的应用程序总是将我重定向到 home url，在主页上我可以访问像

这样的 auth 对象

<script>
export default {
  mounted () {
    const user = this.$auth.user
    user['scope'] = 'some_role_from_db'
    this.$auth.setUser(user)
  }
}
</script>

如何设置 nuxt $auth.user 的范围（或角色）？

How to set scope(or role) of nuxt $auth.user?

oauth-2.0

vue.js

nuxt.js