Conditionally redirect pages based on some async data on the server.

[g-re-g]

I've got this server function that extracts an Option<CurrentUser> from an actix request. It looks like this:

#[server(GetCurrentUser, "/api")]
pub async fn get_current_user(cx: Scope) -> Result<Option<CurrentUser>, ServerFnError> {
    match use_context::<actix_web::HttpRequest>(cx) {
        Some(req) => Ok(CurrentUser::extract(&req).await.ok()),
        None => Ok(None),
    }
}

I would like to make some route redirect if the Option<CurrentUser> is None. For example, if a user hits /settings and get_current_user returns None I'd like them to be redirected to /login.

My initial thought is to write something at the top of a Settings component that:

• Calls this server function
• If we're on the server, issue a redirect and render nothing when the function resolves to None.
• If we're in the client, render loading... and navigate to a new page when the function resolves None.

But my thoughts are, this phase of the components rendering should always only happen on the server because it is for the entire page, and the server knows if there is a current user. So it seems like rather than complicate the settings component, there might be some way to run some code that gates whether the Settings component can be rendered, and if not redirect.

A more general way to describe this problem would be: How do I either render a component or redirect on the server depending on some state that the server holds?

[gbj]

So, this is somewhat tricky because it requires you to defer rendering anything from the server until this async function completes. The story for this is not great at the moment, because the way Leptos is set up with <Suspense/> and streaming is designed to begin sending HTML as soon as possible. I probably need to add something like a defer property on resources so that you can indicate you want to hold off on rendering anything until that's loaded.

The best current way to do this is to put your user check in the route handler itself on the server, and then pass it down into your app as a prop or via context. You can do this with [leptos_preloaded_data_routes](https://docs.rs/leptos_actix/latest/leptos_actix/fn.render_preloaded_data_app.html)

        App::new()
            .route("/api/{tail:.*}", leptos_actix::handle_server_fns())
            .leptos_preloaded_data_routes(
                leptos_options.to_owned(),
                routes.to_owned(),
                |req| async move {
                    if req.path() == "/settings" {
                        CurrentUser::extract(&req).await.ok()
                    } else {
                        None
                    }
                }
                |cx, data| {
                    provide_context(cx, data);
                    view! { cx, <App/> },
                }
            )

[gbj]

For anyone reading: the need for leptos_preloaded_data_routes has been superseded by the ability to do proper async rendering with SsrMode::Async. Check out the ssr_modes examples to see what that looks like.

You can now use the <Redirect/> component inside a <Suspense/>, combined with async rendering, to solve the issue above.

[msmaiaa]

is there any way to preload data on specific routes as if i was using a fully server side app? the thing is that i want the users (without any authentication) to navigate between these routes but i don't want to expose public apis so the data can't be accessed programatically