浏览器在 Vue Router 中使用 beforeEach 重定向之前显示请求的页面

Question

在我的 Vue 3 应用程序（基于 Quasar 2）中，我设置了一个全局导航守卫。这会调用外部 API 端点来检查用户是否已登录。如果没有，则用户将被重定向到身份验证提供程序的登录表单。

以下代码有效并完成了它应该做的事情。但是，当用户未通过身份验证时，浏览器会在重定向前显示最初请求的页面不到一秒。

我不明白这是从哪里来的以及如何解决它，即用户应该立即被重定向，而浏览器不会很快显示应用程序的页面。

import { boot } from 'quasar/wrappers';
import useUserInfoStore from 'src/stores/userInfo';
import userClient from 'src/api/userClient';

export default boot(({ router }) => {
  const userInfoStore = useUserInfoStore();
  // try to access the current user's information to check if authenticated
  router.beforeEach(() => {
    userClient.getUserInfo().then((response) => {
      userInfoStore.authenticated = true;
    }).catch((e) => {
      // otherwise, assume that the user hasn't authenticated and redirect to auth provider
      if (e.response.status === 401) {
        userInfoStore.$reset();
        window.location.href = 'http://localhost:8500/oauth2/authorization/keycloak';
      }
    });
  });
});

Answer 1

发生的事情是：

1. beforeEach被称为
2. userClient.getUserInfo()马上returns一个承诺
3. beforeEach 立即 returns undefined 路由器继续导航
4. 最初请求的页面显示了几分钟
5. 承诺在错误中解决，您将被重定向到登录页面