vscode启动时嵌入登录页面
Joyer Lee Lv2

任务

基于vscode源码实现一个登陆页面。

思路

根据启动流程,在启动之前判断是否需要登陆,若需要弹出一个登陆页面,登陆验证成功后进入应用,否则弹出错误提示,若验证超过三次退出应用。 1.找到合适的启动程序位置。在启动应用之前,判断是否需要登陆。 2.在执行启动程序位置编写登陆程序。

实现

确定登陆逻辑合适的编写位置

在确定登陆逻辑位置之前,先复习下vscode源码的启动流程:

  • 入口是 src/main.js
  • 主进程(Main Process) 的实际调用路径是: main.js -> vs/code/electron-main/main.ts -> vs/code/electron-main/window.tswindow.ts 启动了一个BrowserWindow 加载了 vs/code/electron-browser/workbench/workbench.html
  • 渲染进程(Renderer Process)的实际路径是: vs/code/electron-browser/workbench/workbench.html -> vs/code/electron-browser/workbench/workbench.js

我们要做的是,在程序主进程渲染之前,判断并弹出一个登陆窗口。需要使用到electron的API,结合vscode源码的环境划分,我们需要把逻辑写在vs/code/electron-main/main.ts文件下。

登陆逻辑实现

观察ts文件代码: 发现主要代码写在CodeMain类里。 首先贴上我的源码实现:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
class CodeMain {
main(loginWindow?:BrowserWindow):void {
if (!this.token) {
this.createWindow();
} else {
// Launch
this.startup(args).then(()=>{
if(loginWindow){
loginWindow.close();
}
});
}
}

private token = false;
//创建登录窗口
private createWindow(): void {
//子窗口
let loginWindow = new BrowserWindow({
width: 600,
height: 800,
frame: false,
webPreferences: {
nodeIntegration: true
}
});
//加载页面
loginWindow.loadFile('src/vs/code/browser/workbench/login.html');
ipcMain.on('exit', function (event) {
loginWindow.close();
});
//设置一个变量记录登录次数
let count = 0;
//从页面接收用户输入的账号密码
ipcMain.on('login', (event, username, password) => { //如果没有数据需要传,可以不写参数
//判断账号密码
if (username === '123' && password === '123') {
//登陆成功
//隐藏登录窗口(loginWindow.close();无法启动主窗口)
dialog.showMessageBox({
type: 'info',
title: '登录成功',
message: '登录成功',
buttons:['进入应用']
}).then(()=>{
//更改标签,调用主窗口
this.token = true;
// Main Startup
this.main(loginWindow);
});
} else {
//登录次数加 1
count++;
//超过三次,窗口关闭
if (count >= 3) {
//返回三次登录信息
let loginMessage = '3次登陆失败,窗口将在1秒后关闭';
loginWindow.webContents.send('loginMessage', loginMessage);
//延时三秒关闭窗口
setTimeout(() => {
loginWindow.close();
}, 1000);
} else {
//登陆失败
//返回失败信息
let loginMessage = '登陆失败!登录次数:' + count + '次,共有3次!';
//向窗口发送登陆失败消息
loginWindow.webContents.send('loginMessage', loginMessage);
//刷新窗口,重新登陆
loginWindow.reload();
}
}
});
}
}

代码解析: 1.声明一个验证变量:token 2.创建一个创建登陆窗口的方法:createWindow,内部实现使用了electron主进程api,BrowserWindow、IPC等。 3.登陆成功时需要先等待vscode主进程启动成功才能把loginWindow窗口关闭,否则会导致程序退出。 4.登陆页面的位置也是依据源码环境划分原则,放置在src/vs/code/browser/workbench目录下。

登陆优化计划

在页面运行成功后,添加login菜单选项,触发调起登陆页面。

  • 本文标题:vscode启动时嵌入登录页面
  • 本文作者:Joyer Lee
  • 创建时间:2020-12-08 09:59:25
  • 本文链接:https://lhx.blog.wj2015.com/2020/12/08/vscode-insert-login/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!