在具有单独登录布局的 Nuxt 3 中间件中导航后，布局未更新

Question

我在 Nuxt 3 中遇到一个问题，即在中间件中导航后布局无法正确更新，特别是在登录页面和其他页面使用单独的布局时。以下是设置概述：

我有一个处理身份验证和导航的中间件。这是代码的简化版本：

import { useAuthStore } from "~/stores/auth";

export default defineNuxtRouteMiddleware((to, from) => {
  if (process.server) return;

  let authStore = useAuthStore();
  authStore.checkAuth();

  if (to.path === "/protected") {
    if (!authStore.isAuthenticated) {
      return navigateTo("/sign-in");
    }
  }
});

在此代码中，如果用户未经过身份验证，我使用 navigatorTo 函数重定向到“/sign-in”页面。

我遇到的问题是，导航到“/sign-in”页面后，布局无法正确更新。具体来说，不会应用登录布局，而是保留上一页的布局。

我在 Nuxt 项目中定义了单独的布局，其中一种布局用于登录页面，另一种布局用于其余页面。我怀疑问题在于中间件导航期间如何处理布局。

我已经验证身份验证逻辑和导航工作正常。但是，导航发生后布局不会按预期更新。

如果有人遇到类似的问题或对如何解决此问题有任何见解，我将非常感谢您的帮助。谢谢你！

Answer 1

我遇到了同样的问题。作为解决方法，我通过重新分配 location.href 进行本机重定向。