'Way to redirect and get data between 2 html pages in ElectronJS

I'm currently studying ElectronJS framework, I understood yesterday some interesting things about preload / main process and renderer process. I picked up code from this website and I tried to adapt it about my needs. However, there is something that I certainly did not understand completely on the relationship between the different processes and their functions. I tried to make a very simple login form and connected to my expressjs API locally with fetch.

Everything is working fine but I don't know how to change "view" and redirect the user correctly once he has logged in. I don't know if for example I have to completely change the window (with new BrowserWindow on main process) or just use location.href like I'm trying to do just after I have put the token on localStorage (by the way I don't know if it is a good solution to use localStorage).

I do not arrive to pass data through new "view". I just want to get "data" object on profil.html page after logged in.

This is my login page (index.html) :

const form = document.querySelector("#login");
const err = document.querySelector("#err");

form.addEventListener("submit", e => {
    e.preventDefault();
    const email = document.querySelector("#email").value;
    const pwd = document.querySelector("#pwd").value;
    fetch("http://localhost:5000/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            email: email,
            pwd: pwd
        })
    })
    .then(data => data.json())
    .then(data => { 
        if(! data.status) {
            err.innerHTML = data.msg; 
            return;
        } else {
            localStorage.setItem("userData", data.token);
            api.send("auth", data.user);
            location.href = "profil.html";
        }
    })
    .catch(err => console.log(err));
});

This is my preload.js file :

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            let validChannels = ["auth"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["userData"];
            if (validChannels.includes(channel)) {
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

This is my main process (one part) :

ipcMain.on("auth", (event, data) => {
    win.webContents.send("userData", data);
});

And this is my profil.html page that I want to get all user information with "data" object :

<body>
    <h1>Bienvenue</h1>
    <a href="index.html">Index</a>
</body>
<script>
    api.receive("userData", data => {
        console.log(data);
    });
</script>

When I am redirected to profil.html once logged in, no data is passed.

Search on internet and test several time to change and try to understand the problem.

Solution 1:^[1]

Ok well, I found a solution to my problem. I have to wait the end of page loading (profil.html) before send data to my window :

ipcMain.on("auth", (event, data) => {
    win.loadFile("profil.html");
    win.webContents.on("did-finish-load", () => {
        win.webContents.send("userData", data);
    })
});

I do not know if it's good method but I'm quite satisfied of this solution.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Way to redirect and get data between 2 html pages in ElectronJS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]