Yew AppState Not Persisting Across Route Changes After Login Redirect

[fukgo]

Hello everyone,

I am encountering an issue with managing the application state in my Yew application.

In my app, I use AppStateContext to wrap around the Route component, and I update the AppState (which includes the user information) in the Login component using:

rust
复制代码
let app_state = use_context::().expect("no context found");
app_state.borrow_mut().user = Some(UserInfo::new(login_res.user, login_res.token));
console::log_1(&JsValue::from_str(&format!("{:?}", app_state.borrow())));
gloo::timers::future::TimeoutFuture::new(5000).await;
web_sys::window().unwrap().location().set_href("/").unwrap();
In the Login component, I successfully receive and update the AppState, and I can see the updated state in the console log. However, after the redirection to the home page (/), the AppState is reset, and the user information is lost.

The context is passed using ContextProvider, but it seems that the state doesn't persist when switching routes.

I would really appreciate some assistance with this issue. Why is the state not persisting after the page is redirected? How can I ensure that the AppState remains consistent across different routes?

Thank you for your help!

this is the code:
/app.rs
#[derive(PartialEq,Debug)]
pub struct AppState {
pub user: Option,
}

impl AppState{
pub fn new() -> Self {
Self {
user: None,
}
}
pub fn is_login(&self) -> bool {
self.user.is_some()
}
}

pub type AppStateContext = Rc<RefCell>;
#[derive(Clone, Routable, PartialEq)]
pub enum Route {
#[at("/")]
Home,
#[at("/login")]
Login,
#[at("/register")]
Register,
#[at("/404")]
NotFound,
}

fn switch(routes: Route) -> Html {
match routes {
Route::Home => html! { },
Route::Login => html! { },
Route::Register => html! { },
Route::NotFound => html! { },
}
}

#[function_component(App)]
pub fn app() -> Html {
let app_state = Rc::new(RefCell::new(AppState::new()));

html! {
    <BrowserRouter>
        <ContextProvider<AppStateContext> context={app_state}>
            <div class="container mt-4">
                <nav class="navbar navbar-expand-lg navbar-light bg-light mb-4">
                    <a class="navbar-brand" href="#">{ "Yew App" }</a>
                    <div class="collapse navbar-collapse">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <Link<Route> to={Route::Home} classes="nav-link">{ "Home" }</Link<Route>>
                            </li>
                            <li class="nav-item">
                                <Link<Route> to={Route::Login} classes="nav-link">{ "Login" }</Link<Route>>
                            </li>
                            <li class="nav-item">
                                <Link<Route> to={Route::Register} classes="nav-link">{ "Register" }</Link<Route>>
                            </li>
                        </ul>
                    </div>
                </nav>

                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <Switch<Route> render={move |routes| switch(routes)} />
                    </div>
                </div>
            </div>
        </ContextProvider<AppStateContext>>
    </BrowserRouter>
}

}

//login.rs

#[derive(Serialize, Deserialize, Clone)]
pub struct UserLogin {
pub username: String,
pub password: String,
}
#[derive(Properties,PartialEq)]
pub struct LoginProps{
pub app_state: AppStateContext,
}

#[function_component(Login)]
pub fn login() -> Html {
let app_state = use_context::().expect("no context found");

let user_logged_in = {
    let app_state = app_state.borrow();
    app_state.user.is_some()
};

if user_logged_in {
    let _ = web_sys::window().unwrap().location().set_href("/").unwrap();
    // return html! {};
}

let username = use_state(|| "".to_string());
let password = use_state(|| "".to_string());

let on_username_input = {
    let username = username.clone();
    Callback::from(move |e: InputEvent| {
        if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
            username.set(input.value());
        }
    })
};

let on_password_input = {
    let password = password.clone();
    Callback::from(move |e: InputEvent| {
        if let Some(input) = e.target_dyn_into::<HtmlInputElement>() {
            password.set(input.value());
        }
    })
};

let onsubmit = {
    let username = username.clone();
    let password = password.clone();
    let app_state = app_state.clone();

    Callback::from(move |e: SubmitEvent| {
        e.prevent_default(); // 防止页面刷新
        let login_data = UserLogin {
            username: (*username).clone(),
            password: (*password).clone(),
        };

        let app_state = app_state.clone();
        spawn_local(async move {
            let response: Result<gloo::net::http::Response, gloo::net::Error> =
                Request::post(&LOGIN_API)
                    .json(&login_data)
                    .unwrap()
                    .send()
                    .await;

            match response {
                Ok(resp) if resp.status() == 200 => {
                    match resp.json::<LoginResponse>().await {
                        Ok(login_res) => {
                            app_state.borrow_mut().user = Some(UserInfo::new(login_res.user, login_res.token));
                            console::log_1(&JsValue::from_str(&format!("{:?}", app_state.borrow())));
                            gloo::timers::future::TimeoutFuture::new(2000).await;
                            web_sys::window().unwrap().location().set_href("/").unwrap();
                        }
                        Err(err) => {
                            web_sys::window()
                                .unwrap()
                                .alert_with_message(&format!(
                                    "Failed to parse response: {}",
                                    err
                                ))
                                .unwrap();
                        }
                    }
                }
                Err(err) => {
                    web_sys::window()
                        .unwrap()
                        .alert_with_message(&format!("Login request failed: {}", err))
                        .unwrap();
                }
                _ => {
                    web_sys::window()
                        .unwrap()
                        .alert_with_message("Login failed")
                        .unwrap();
                }
            }
        });
    })
};

html! {
    <div class="container mt-5">
        <h1>{ "Login" }</h1>
        <form onsubmit={onsubmit}>
            <div class="mb-3">
                <label for="username" class="form-label">{ "Username" }</label>
                <input id="username" type="text" class="form-control" value={(*username).clone()} oninput={on_username_input} />
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">{ "Password" }</label>
                <input id="password" type="password" class="form-control" value={(*password).clone()} oninput={on_password_input} />
            </div>
            <button type="submit" class="btn btn-primary">{ "Login" }</button>
        </form>
    </div>
}

}

[ranile]

Can you please format your post such that it uses code blocks properly? I cannot understand your issue because of the misformatted text

[fukgo]

thank you,I've solved ths problem