CSR how to make request (post/get) axios/vue like ?

[nbari]

In Vue I have something like this:

• get a token (HTTP GET request)
• retry if you can't get token
• retry refresh the token
• hash the password
• post it
• retry

<script>
import axios from "axios";

async function digestMessage(message) {
  const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
  const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // hash the message
  const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
  const hashHex = hashArray
    .map((b) => b.toString(16).padStart(2, "0"))
    .join(""); // convert bytes to hex string
  return hashHex;
}

let retryCount = 0;
const maxRetries = 3;

export default {
  data() {
    return {
      form: {
        email: null,
        password: null,
      },
      token: null,
      expires: null,
    };
  },
  created() {
    this.fetchToken();
  },
  methods: {
    async fetchToken() {
      try {
        const response = await this.fetchTokenFromAPI();
        this.updateTokenAndExpires(response);
      } catch (error) {
        console.error("Error fetching token:", error);
        this.retryFetchToken();
      }
    },

    async refreshToken() {
      try {
        const response = await this.fetchTokenFromAPI();
        this.updateTokenAndExpires(response);
        this.scheduleTokenExpirationRefresh();
      } catch (error) {
        console.error("Failed to refresh token:", error);
        this.retryRefreshToken();
      }
    },

    async fetchTokenFromAPI() {
      return await axios.get(
        `https://${import.meta.env.VITE_API_TOKEN_HOST}/token`,
        {
          params: {
            client_id: import.meta.env.VITE_CLIENT_ID,
          },
        },
      );
    },

    updateTokenAndExpires(response) {
      this.token = response.data.token;
      this.expires = response.data.expires * 1000; // Convert to milliseconds
    },

    retryFetchToken() {
      if (this.retryCount < this.maxRetries) {
        const retryDelay = this.calculateRetryDelay();
        setTimeout(() => this.fetchToken(), retryDelay);
        this.retryCount++;
      } else {
        console.error("Max retries reached for fetching token");
        // Handle the error or notify the user appropriately
      }
    },

    retryRefreshToken() {
      if (this.retryCount < this.maxRetries) {
        const retryDelay = this.calculateRetryDelay();
        setTimeout(() => this.refreshToken(), retryDelay);
        this.retryCount++;
      } else {
        console.error("Max retries reached for refreshing token");
        // Handle the error or notify the user appropriately
      }
    },

    calculateRetryDelay() {
      const maxBackoffTime = 60 * 1000; // 1 minute
      const exponentialBackoff = Math.min(
        2 * Math.random() * Math.pow(2, this.retryCount),
        maxBackoffTime,
      );
      return exponentialBackoff;
    },

    scheduleTokenExpirationRefresh() {
      const refreshTime = this.expires - 60 * 1000; // Refresh 1 minute before expiration
      setTimeout(() => this.refreshToken(), refreshTime);
    },

    async onSubmit(evt = null) {
      if (evt) {
        evt.preventDefault();
      }

      try {
        const hashedPassword = await digestMessage(this.form.password); // Hash the password

        const formData = {
          email: this.form.email,
          password: hashedPassword,
          token: this.token,
        };

        // Make a POST request to submit the form data
        const postResponse = await axios.post(
          `https://${import.meta.env.VITE_API_HOST}/user/login`,
          formData,
          {
            headers: {
              "Content-Type": "application/json",
            },
          },
        );

        // Handle the response as needed
        console.log("Form submission successful:", postResponse.data);

        // TODO: Redirect the user to the dashboard
      } catch (error) {
        if (error.response) {
          const statusCode = error.response.status;
          switch (statusCode) {
            case 400:
              if (retryCount < maxRetries) {
                // Retry the request after a delay
                retryCount++;
                setTimeout(() => {
                  this.onSubmit();
                }, 1000); // Retry after 1 second
              } else {
                console.error("Max retry attempts reached for 400 error");
                // Handle the error or notify the user appropriately
              }
              break;
            case 401:
              // Handle Unauthorized (401) error
              console.error("Unauthorized:", error.response.data);
              // Redirect the user to the login page or display a message indicating unauthorized access
              break;
            default:
              // Handle other error responses
              console.error("Error:", error.response.data);
              // Display a generic error message or take appropriate action
              break;
          }
        } else {
          console.error("Network Error:", error.message);
          // Display a generic error message or take appropriate action
        }
      }
    },
  },
};
</script>

I am trying to do the same here in my first attempts:

use anyhow::Result;
use gloo_net::http::Request;
use leptos::*;
use serde::{Deserialize, Serialize};

#[derive(Debug, Clone, Serialize, Deserialize)]
struct Token {
    token: String,
    expires: i64,
}

async fn get_token(client_id: &str) -> Result<Token> {
    let req = Request::get("https://api.test.tld/token").query([("client_id", client_id)]);
    let res = req.send().await?;
    let token: Token = res.json().await?;
    Ok(token)
}

/// Default Home Page
#[component]
pub fn SignIn() -> impl IntoView {
    let client_id = "123";
    let token = create_resource(
        || (),
        move |_| async move {
            Some(match get_token(client_id).await {
                Ok(token) => {
                    log::info!("Got token: {:#?}", token);
                    token
                }
                Err(e) => {
                    log::error!("Failed to get token: {:?}", e);
                    Token {
                        token: "".to_string(),
                        expires: 0,
                    }
                }
            })
        },
    );
...

But I start to struggle trying to find how to make the requests (get token/retry, post) and then apply logic without using create_resource or async_move. (trying to find how to handle the logic of client <---> backend and keep the views apart) but maybe I am getting it wrong, therefore wondering how could I manage all this and based on the results just update the views.

[gbj]

What does async_move mean?

If you want to avoid create_resource that's fine, especilly if you're just using CSR. Use spawn_local to run some Future. Use whichever HTTP request library you want to replicate the axios behavior. You can set the value of signals just like you are setting fields and variables in your Vue example.

[nbari]

Hi, thanks, that was a typo, I was trying to capture/log the output of the request and found out that I had to do it only with move |_| async move, will check spawn_local

[nbari]

I just tested spawn_local and gave me a better overview, also the docs helped me to better understand why in some cases I may need the create_resource (https://docs.rs/leptos/latest/leptos/fn.spawn_local.html#limitations) "more related to the view" but trying to put things together, how could I access the spawn scope, for example, in this flow:

1. load the page (spawn_local task for fetching token, re-fetch based on the expires_in, etc)

  let token = spawn_local(async move {
        let token = get_token(client_id).await;
        log::info!("Got token: {:#?}", token);
        // if can't get token retry, etc do custom logic
    }); 

2. collect data from the HTML form
3. submit data POST

Before submitting, I need to use the data acquired in step 1 (token for this example) to hash the payload and also send it together in the payload response, (AWS signature v4), therefore wondering how to access/share variables from the spawn_local before submitting or if can listen to signals within spawn_local, for example when client clicks on the submit button so that based on that action I could do X task and submit.