next .js loginWith Auth0延迟重定向

Question

我使用Auth0 &Nuxt.js。不知何故，在loginWith之后，页面在重定向到Auth0的登录页面之前仍然继续渲染一小会儿。从loginWith返回的承诺是undefined，这使得阻塞不可能。是否有一种方法可以立即进行Auth0登录而不首先渲染页面?

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

Answer 1

首先你不应该阻止渲染直到某个异步操作完成。基本上是用& await&quot装饰的函数的异步调用;需要让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

Answer 2

等待。$auth.loginWith("auth0");造成了短暂的延迟。这是验证当前会话是否处于活动状态所需的时间。这可以通过添加加载页面来处理。

showLoadingPage(); // display a fullscreen loading animation or text
if (!this.$auth.loggedIn) {
await this.$auth.loginWith("auth0");
}
hideLoadingPage(); // hide the loading animation after the await completes
const user = this.$auth.user;
// Operations using user information below //