时间戳

首页 > 解决方案 > 保存 oAuth 用户 - Nuxt auth - github 策略

nuxt.js - 保存 oAuth 用户 - Nuxt auth - github 策略

问题描述

我正在尝试将登录到我用户数据库的 GitHub OAuth 用户保存。我正在使用 Nuxt.js 身份验证模块来实现该功能。

`Nuxt.config.js 中的身份验证设置

auth: {
  strategies: {
    local: {
      token: {
        property: 'data.token',
      },
      user: {
        property: 'data',
      },
      endpoints: {
        login: { url: 'login', method: 'post' },
        user: { url: 'byToken', method: 'get' },
        logout: { url: 'logout', method: 'get' },
      },
    },
    github: {
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    },
  },
},

Login.vue 页面

<template>
   <button class="social-icons" @click="githubLogin()">
     Login with Github
   </button>
</template>

<script>
export default {
  methods: {
    async githubLogin() {
      try {
        const response = await this.$authApi.loginWithGithub()
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>

验证插件文件

export default function (context, inject) {
  inject('authApi', {
    loginWithGithub,
  })
async function loginWithGithub() {
    try {
      await context.$auth.loginWith('github')
      // Get the required info from the user object set in vuex
      const user = context.$auth.user //This is undefined
      const userInfo = {
        oAuthId: user.id,
        username: user.login,
        name: user.name,
        bio: user.bio,
        email: user.email,
        profilePhoto: user.avatar_url,
        isOAuthUser: true,
      }
      // My api server to store the passed userinfo to db
      const response = await context.$axios.post('/socialRegister', userInfo)
      return response
    } catch (err) {
      setErrorMessage(err)
    }
  }
}

现在，当我单击按钮使用 GitHub 登录（Login.vue）时，该模块成功将从 GitHub 接收到的访问令牌设置为本地存储，并将用户设置为状态。但是正如您在 loginWith('github')context.$auth.user未定义后的代码（auth.js 插件文件）中看到的那样。现在我的问题是我如何访问用户信息，以便我可以将该信息转发到我的 api 服务器以将用户存储在数据库中。

标签： nuxt.jsnuxt-auth

解决方案

我之前遇到过类似的错误。

去 tsconfig.json 并改变

{
"strict":false,
}

如果它不能解决您的问题，请比较您的 tsconfig.json 和nuxt-auth 原始 tsconfig.json

推荐阅读