NextJS 13.4应用路由器中间件页面重定向没有样式

omhiaaxx  于 2023-06-05  发布在  其他
关注(0)|答案(1)|浏览(120)

如果用户不在登录屏幕上,我将使用以下中间件创建重定向。这只是个测试案例最终,该条件将检查有效的认证会话并有条件地重定向。
但是,当重定向完成时,页面没有样式。
这是基于NextJS文档示例中的示例。

export async function middleware(req: NextRequest) {
    if(req.nextUrl.pathname != '/sign-in') {
        return NextResponse.redirect(new URL('/sign-in', req.url))
    }
}

禁用中间件(将其注解掉),我可以毫无问题地加载/sign-in。在“源代码”开发工具选项卡中,我看到了这个。

启用中间件显示零样式(使用默认的顺风配置)。它还显示了一个二级登录文档(紫色图标),该文档似乎被识别为完全不同的页面。未设置样式的页面似乎没有React。

我很困惑为什么会发生这种情况,或者是否有更好的方法来创建中间件身份验证,如果没有有效的会话(或任何条件),将用户重定向到登录页面。

zxlwwiss

zxlwwiss1#

好吧,我所做的就是创建这个堆栈溢出问题,最终自己实现了答案。
创建上述重定向路径条件是为了避免在我的测试过程中出现重定向循环。但是,它有缺陷,因为它将EVERY请求重定向到/sign-in,包括样式。
我把这个留着以防有人犯这个愚蠢的错误。

仅重定向特定路径

如果您确实希望有条件地从一个路径重定向到另一个路径而不搞砸一切,您可以遵循完整的示例并包含中间件的匹配器配置。

export const config = {
    matcher: '/about/:path*',
};

但是,这会将整个中间件系统的功能限制在此配置中。

阻止NextJS 13应用路由器中间件在静态文件上运行

如果你想停止Middleware在静态文件(比如你的样式和字体)上运行,你可以使用这个配置:

// Stop Middleware running on static files
export const config = { matcher: '/((?!.*\\.).*)' }

相关问题