Nuxt.js登录使用Auth0延迟重定向

Question

我对 Auth0 和 Nuxt.js 进行了以下设置。不知何故loginWith，在重定向到 Auth0 的登录页面之前，页面仍然继续呈现一小会儿。从 loginWith 返回的 Promise 是undefined，这使得阻塞不可能发生。有没有办法立即进行 Auth0 登录而不先渲染页面？

if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
}
const user = this.$auth.user;
// Operations using user information below //

Answer 1

首先，在某些异步操作完成之前，您不应该阻止渲染。基本上，需要对用“await”修饰的函数进行异步调用，才能让 UI 线程完成其工作。您应该向用户显示一些有用的信息，而不是阻止渲染，至少是一些描述正在执行的过程的消息：“授权...”或类似的内容。

要解决您的问题，您可以在组件（或 vuex 存储中）声明一些布尔变量，该变量设置为 false，直到用户获得授权。通过在 html 模板中检查此值，您可以防止显示页面内容，直到浏览器重定向到身份验证页面。

data() {
  return {
    isAuthorized: false;
  }
}

// your code
if (!this.$auth.loggedIn) {
  await this.$auth.loginWith("auth0");
} else {
  this.isAuthorized = true;
}

// process user information