身份验证成功完成后导航至 URL

Question

我目前正在开发一个用于学习目的的项目，使用 Angular16 和 Supabase 作为后端。我已经成功地使用 Github、Google 和电子邮件登录用户（从技术上讲，我如何登录并不重要，因为每个提供商的问题都是一样的）。

我的问题如下，我提供代码然后解释：

登录.component.ts:

async signInWithGithub(): Promise<void> {
    try {
      this.loading = true;
      this.supabase.signInWithGithub()
      .then(() => {
        this.router.navigate(['login']);
      })
      .catch((error) => {
        if (error instanceof Error) {
          alert(error.message);
        }
      })
      .finally(() => {
        this.loading = false;
      });
    } catch (error) {
      if (error instanceof Error) {
        alert(error.message);
      }
    } finally {
      this.loading = false;
    }
  }

身份验证成功完成后，此代码应执行导航。然而，发生的情况是该方法首先执行导航，一段时间后，身份验证完成并返回到登录组件。

所以我的问题是：身份验证完成后如何执行导航？

我提供了我自己编写的每一个代码，因为 supabase 几乎为我们做了所有事情。

supabase.service.ts：

signInWithGithub(): Promise<OAuthResponse>{
    return this.supabase.auth.signInWithOAuth({ provider: 'github' });
  }

main方法

signInWithOauth()

还返回一个

Promise<OAuthResponse>

Answer 1

试试这个：

async signInWithGithub(): Promise<void> {
try {
  this.loading = true;
  this.supabase.auth.signInWithOAuth({ provider: 'github' })
  .then(() => {
    this.router.navigate(['login']);
  })
  .catch((error) => {
    if (error instanceof Error) {
      alert(error.message);
    }
  })
  .finally(() => {
    this.loading = false;
  });
} catch (error) {
  if (error instanceof Error) {
    alert(error.message);
  }
} finally {
  this.loading = false;
}
}

这有点盲目，因为 Promise 是奇怪而奇妙的小生物。但我认为这可能与您正在使用嵌套的承诺有关。所以我只是删除一层承诺，看看它是否可能是原因:)

signInWithGithub()

-> 承诺

signInWithOAuth()

-> 也是一个承诺（我想。我对supabase不熟悉）

它的基本文档，但它确实让我的思想朝着这个方向发展

查看此链接。它有一些关于嵌套和链式承诺的简单示例 https://www.tutorialspoint.com/how-to-use-typescript-with-native-es6-promises#