vue.js - Nuxt.js loginWith 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 商店)中声明一些 bool 变量，该变量在用户获得授权之前设置为 false。通过在您的 html 模板中检查此值，您可以防止在浏览器重定向到身份验证页面之前显示页面内容。

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

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

// process user information