Leptos-Axum、SSR 和条件路由器渲染问题

Question

我正在构建一个带有 JWT 身份验证的全栈 Leptos/Axum - SSR/Hydrate Web 应用程序... 问题是，一旦我在浏览器的本地存储中拥有 JWT 令牌，受保护的路由就会重定向到登录页面，无论 JWT 是否存在（用户存在）...

这种情况仅发生在初始页面加载期间。
单击受保护的页面链接（主页）将正确导航到该页面...

这是路由配置的一部分（在 app.rs 文件中）：

...
<Route path="/" view=move || {
        view! {
            <Show when=move || { global_state.current_user.get().is_none()}>
                <Redirect path=LOGIN_URL/>
            </Show>
            <Outlet/>
        }
    }
>
  <Route path="/" view=HomePage/>
</Route>
...

这是逻辑片段（在 app.rs 文件中）：

...
 let global_state = use_context::<GlobalState>().unwrap();

    create_effect(move |_| {
        let current_user = AuthService::get_current_user();

        if current_user.user_name.is_empty() {
            global_state.current_user.set(None);
        } else {
            global_state.current_user.set(Some(CurrentUser {
                user_name: create_rw_signal(current_user.user_name.clone()),
            }));
        }
    });
 ...

这里可能出了什么问题？

Answer 1

我找到了解决方法...

我用自定义组件替换了内置的重定向组件：

...
  <Show when=move || { global_state.current_user.get().is_none()}>
      <RedirectComponent path=LOGIN_URL/>
  </Show>
...

以下是该组件的实现：

#[component]
pub fn RedirectComponent(path: &'static str) -> impl IntoView {
    let global_state = use_context::<GlobalState>().unwrap();
    let is_logged_in = global_state.current_user.get().is_some();

    create_effect(move |_| {
        if is_logged_in {
            Navigate::go_to(path, None);
        } else {
            Navigate::go_to(LOGIN_URL, None);
        }
    });
}

现在，它按预期工作了:)