如何为Nuxt的$auth.user设置scope(角色)？OAuth2登录后配置用户属性

你原有代码不生效的核心原因是：nuxt-auth的OAuth2回调处理逻辑优先级远高于页面生命周期，在谷歌认证回调到你的服务后，nuxt-auth会先校验返回的token、初始化用户信息，校验通过后立刻自动跳转到用户登录前访问的页面，welcome.vue的mounted钩子还没执行完成就已经触发跳转，因此你的角色赋值逻辑不会运行。

下面是两种可行的解决方案：

方案一：使用nuxt-auth内置的onLoggedIn钩子（推荐，最简洁稳定） #

这是官方提供的登录成功回调钩子，会在用户登录完成、用户信息初始化后立刻触发，不会被重定向逻辑打断：

1. 在项目plugins目录下新建auth.js文件，写入以下内容：

export default function ({ $auth, $axios }) {
  // 监听登录成功事件
  $auth.onLoggedIn(async (user) => {
    // 此处替换为你从应用数据库查询用户角色的接口请求
    const roleRes = await $axios.get('/api/user/role', {
      headers: {
        Authorization: `Bearer ${$auth.strategy.token.get()}`
      }
    })
    // 合并原用户信息和角色字段，更新auth的用户数据
    const updatedUser = {
      ...user,
      scope: roleRes.data.scope
    }
    $auth.setUser(updatedUser)
  })
}

2. 在nuxt.config.js中注册该插件，注意关闭ssr渲染，因为auth模块仅在客户端生效：

// nuxt.config.js 新增plugins配置
plugins: [
  { src: '~/plugins/auth.js', ssr: false }
]

方案二：关闭自动重定向，在回调页手动控制跳转 #

如果你坚持要在回调页处理角色逻辑，可以关闭nuxt-auth的自动重定向，处理完逻辑后再手动跳转：

1. 修改nuxt.config.js的auth配置，给谷歌策略添加autoRedirect: false关闭自动跳转：

auth: {
  scopeKey: 'scope',
  strategies: {
    google: {
      client_id: process.env.GOOGLE_KEY,
      codeChallengeMethod: '',
      scope: ['profile', 'email'],
      responseType: 'token id_token',
      autoRedirect: false // 新增：关闭默认自动重定向
    }
  },
  redirect: {
    login: '/login',
    logout: '/logout',
    home: '/',
    callback: '/welcome'
  }
},

2. 修改welcome.vue代码，处理完角色逻辑后再手动跳转到目标页：

<script>
export default {
  async mounted () {
    // 等待用户信息完全初始化
    await this.$auth.fetchUser()
    const user = this.$auth.user
    // 替换为你从数据库查询角色的逻辑
    const roleRes = await this.$axios.get('/api/user/role')
    user.scope = roleRes.data.scope
    this.$auth.setUser(user)
    // 读取登录前用户要访问的页面，没有则跳转到首页
    const targetPath = this.$auth.$storage.getUniversal('redirect') || '/'
    this.$auth.$storage.removeUniversal('redirect')
    this.$router.push(targetPath)
  }
}
</script>

内容的提问来源于stack exchange，提问作者Bogdan Timofeev