electron中设置webview的token数据

版本环境

"electron": "^15.1.2",
"electron-builder": "^23.6.0",

主要使用的electron的功能是

链接：www.electronjs.org/zh/docs/lat...

具体代码

vue代码页面

partition="persist:lk_ffan"关键
window.API.lkSetCookie关键

html 复制代码

<style lang="scss" scoped>
.webview-dom {
	width: 100vw;
	height: calc(100vh - 118px);
	transform: translateY(-12px);
	background: #fff;
}
</style>
<template>
	<webview
		ref="webview2"
		class="webview-dom"
		:src="link"
		allowpopups
		partition="persist:lk_ffan"
	></webview>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
let webview2 = ref(null);

let link = ref(route.query.url);
onMounted(async () => {
	webviewInit();
});

const webviewInit = () => {
	let el = webview2.value;
	el.addEventListener("new-window", (event) => {
		const urlClass = new URL(event.url);
		const { protocol } = urlClass;
		link.value = event.url;
		if (protocol === "http:" || protocol === "https:") {
			webview.value.src = event.url;
		}
	});
	el.addEventListener("dom-ready", () => {
		console.log("dom-ready");

		// el.openDevTools();
	});

	el.addEventListener("did-navigate", async (e) => {
		let finalUrl = e.url; // 获取实际导航到的 URL

		window.API.lkSetCookie(
			{
				partition: el.partition,
				finalUrl: finalUrl,
				token: localStorage.getItem("token1"),
				schoolId: localStorage.getItem("token2"),
			},
			(ee) => {
				console.log(ee);
			}
		);
	});
};
</script>

其他代码

主要是electron的通讯，vue页面想要调用原生的electron方法。
需要借用中间变量window才能调用。

js 复制代码

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

window.API = {
	// webview-setCookie
	lkSetCookie: async (args, callback) => {
		const result = await ipcRenderer.invoke("webview-setCookie", args);
		callback(result);
	},
};

js 复制代码

const { app, BrowserWindow, ipcMain, session } = require("electron");
// 设置cookie
ipcMain.handle("webview-setCookie", async (event, res) => {
        let webviewSession = session.fromPartition('persist:lk_ffan');

        try {
                // 设置一个通用的 cookie，这里使用 '.example.com' 作为 domain，
                // 确保它对所有子域有效，并设置 path 为 '/' 以覆盖所有路径。
                await webviewSession.cookies.set({
                        url: "地址", // 注意这里的点前缀，表示对所有子域有效
                        name: "token1",
                        value: res.token,
                        domain: "跨域地址", // 使用点前缀来涵盖所有子域
                        path: "/", // 根路径，适用于所有路径
                        secure: true, // 如果你的应用只通过 HTTPS 访问，则为 true
                        httpOnly: false,
                        expirationDate: Math.floor(Date.now() / 1000) + 86400 * 30, // 一个月后的 Unix 时间戳
                });


                await webviewSession.cookies.set({
                        url: "地址", // 注意这里的点前缀，表示对所有子域有效
                        name: "token2",
                        value: res.schoolId,
                        domain: "跨域地址", // 使用点前缀来涵盖所有子域
                        path: "/", // 根路径，适用于所有路径
                        secure: true, // 如果你的应用只通过 HTTPS 访问，则为 true
                        httpOnly: false,
                        expirationDate: Math.floor(Date.now() / 1000) + 86400 * 30, // 一个月后的 Unix 时间戳
                });

                console.log(
                        "Cookie has been set for all webviews using the same partition."
                );
        } catch (error) {
                console.error("Failed to set cookie:", error);
        }

        return "设置cookie成功！";
});

反思

我应该写的有问题，我是每次打开一个新的webview就会创建一次partition="persist:lk_ffan"。我观看文档说的是只需要创建一次就可以。但是功能实现了，具体怎么优化，不想看了。。。。expirationDate参数的作用我不清楚，或者说过期时间我没用到。