【Electron】vue项目携带cookie完成第三方网站免登跳转_electron使用browserview嵌入第三方网站保持登录

需求背景:

在原有的Vue项目，后端能获取到目标网站的cookie，前端通过携带cookie打开新窗口并完成免登操作。

Electron

• 使用electron forge创建electron项目，详见官网文档
• 在主线程文件main.js/index.js(参考具体项目配置package.json文件main指向)，添加事件监听
• 主线程：

const { app, BrowserWindow, ipcMain } = require('electron');

// createWindow为工具默认打开的浏览器
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    show: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true, 
      contextIsolation: false,
    },
  });
  mainWindow.maximize() // 打开全屏
  // 加载指定网址 指向自己的项目地址
  mainWindow.loadURL('xxx.com'); 
  mainWindow.show()
  
  // 监听打开自定义协议的事件(主要)
  ipcMain.on('open-third-page', (event, cookie) => {
  	// cookie为事件接收参数
    event.preventDefault();
    // 发送事件到渲染进程，传递URL参数
    createNewWindow(cookie)
  });
};

// 程序准备好之后触发打开默认页面
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• 在preload文件向项目注入ipcRenderer

const { ipcRenderer } = require('electron');
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
window.addEventListener('DOMContentLoaded', (e, arg) => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

// 页面注入ipcRenderer
window.ipcRenderer = ipcRenderer;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

VUE项目

如果用electron打开项目地址，则已经通过preload注入ipcRenderer挂在到window，可以通过window.ipcRenderer来判断当前是否electron环境中，如果判断是，则走electron交互事件的逻辑

handleClick(){
	if (window.ipcRenderer) {
		// 触发自定义事件 
		// 事件名要与监听的一致 cookie为向electron发送的参数
		window.ipcRenderer.send('open-third-page', cookie)
	} else {
		// 不在electron环境
	}
}
1
2
3
4
5
6
7
8
9

Electron触发自定义事件

const createNewWindow = (cookieData) => {
  const partition = Date.now().toString() // session隔离 要设定唯一的string 否则窗口多开的话
  const mainWindow = new BrowserWindow({
    show: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true, // enableRemoteModule保证renderer.js可以可以正常require('electron').remote，此选项默认关闭
      contextIsolation: true,
      partition,
    },
  });

  mainWindow.maximize()

  const { session } = mainWindow.webContents;
  const { cookies } = session;
  // 等待cookie初始化完成
  function waitCookieInit() {
    return new Promise(function (resolve) {
      setTimeout(resolve, 3000);
    });
  };

  // 替换cookie
  function cookieReplace(cookies, cookie) {
    return cookies.remove(cookie.url, cookie.name).then(() => {
      return cookies.set(cookie);
    })
  };

  // 批量设置目标值
  const cookieValue = []
  // 多个cookie的情况下 遍历去设置参数
  // 默认格式{cookie的key值: cookie的value}
  const keyList = Object.keys(cookieData);
  keyList.forEach(key => {
    cookieValue.push(
      {
        url: 'xxx.com', // 目标第三方网址
        name: key, // 第三方网址cookie的key值
        value: cookieData[key], // cookie的value值
        domain: '.xxx.com', // domain要设置的值
        expirationDate: 99999999999 // 过期时间
      }
    )
  })

  // 批量替换
  waitCookieInit().then(() => {
    const promises = cookieValue.map(cookie => cookieReplace(cookies, cookie));
    return Promise.all(promises).then(() => {
      // 设置成功
      mainWindow.loadURL('xxxx.com'); // 加载指定第三方网址
      // mainWindow.webContents.openDevTools();
    }).catch(() => {
      // 设置失败
    }).finally(() => {
    })
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61