@vo3dooh

Как создать новое окно в Electron?

Ребята подскажите пожалуйста, ибо не могу понять как двигаться в разработке приложения дальше. В чем суть: на сервере реализовал Rest API для регистрации и авторизации пользователя в своем приложении. Код основных файлов:

Server code (app.js)
const port = 3002;
const express = require('express');
const bodyParser = require('body-parser');
const routes = require('./routes/routes');
const session = require('express-session');
const app = express();

app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 60000 }
}))

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true,
}));

routes(app)

const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server listening on port ${server.address().port}`);
});


Server code (routes.js)
const pool = require('../data/config');

const router = app => {

  app.get('/', function(request, response) {
  	response.sendFile(path.join(__dirname + '/index.html'));
  });

  app.post('/auth', function(request, response) {
  	var username = request.body.username;
  	var password = request.body.password;
    if (username && password) {
        pool.query('SELECT username, password FROM users WHERE username = ? AND password = ?', [username, password], function(error, results, fields) {
  			if (results.length > 0) {
  				request.session.loggedin = true;
  				request.session.username = username;
  				response.redirect('/login');
  			} else {
  				response.send('Incorrect Username and/or Password!');
    			response.end();
        	}
  		});
  	} else {
  		response.send('Please enter Username and Password!');
  		response.end();
  	}
  });

  app.get('/login', function(request, response) {
  	if (request.session.loggedin) {
  		response.send('Welcome back, ' + request.session.username + '!');
  	} else {
  		response.send('Please login to view this page!');
  	}
  	response.end();
  });

  app.post('/registration, (request, response) => {
    pool.query('INSERT INTO users SET ?', request.body, (error, result) => {
        if (error) throw error;

        response.status(201).send(`User added with ID: ${result.insertId}`);
      });
  });

}

module.exports = router;


И вот такой код имеет электронное приложение

Electron App (main.js)
const path = require('path');
const url = require('url');
const config = require('./config.js');
const {app, BrowserWindow} = require('electron');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 780,
    height: 497,
    icon: __dirname + "/img/icon.png",
    frame: false,
    hasShadow: false,
    transparent: true
  });
  
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file',
    slashes: true
  }));
  
  win.on('closed', () => {
    win = null
  });

};

app.on('ready', function () {
    setTimeout(function() {
        createWindow();
    }, 500);
});

app.on('window-all-closed', () => {
  app.quit();
})


Electron App (index.html)
<!DOCTYPE html>
<html lang="ru" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Project</title>
    <link rel="stylesheet" href="all.min.css">
  </head>
  <body>
    <div class="container" id="container">
      <div class="form-container sign-up-container">
        <form action="http://localhost:3002/registration" method="post">
          <h1>Create Account</h1>
          <input type="text" name="username" placeholder="Login" />
          <input type="email" name="email" placeholder="Email" />
          <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Registration">
        </form>
      </div>
      <div class="form-container sign-in-container">
        <form action="http://localhost:3002/auth" method="post">
          <h1>LoginIn</h1>
          <input type="text" name="username" placeholder="Login" />
          <input type="password" name="password" placeholder="Password" />
          <input type="submit" value="LoginIn">
        </form>
      </div>
    </div>
  </body>
    <script>
      require('./render.js')
    </script>
</html>


Возможно код не очень правильный, но это мое первое приложение и мне не понятны некоторые вещи...

С регистрацией все понятно, с форм данные заносятся в БД. Немного не могу понять как двигаться дальше в плане авторизации. От сервера я получаю это сообщение в электронном приложении, если логин и пароль совпадают
response.send('Welcome back, ' + request.session.username + '!');

Но как двигаться дальше? На этом я просто застрял. В целом тут два варианта:
1)Переадресация на другую html страницу, либо что мне кажется более логичным
2)Закрытие текущего окна после успешной авторизации и открытие нового с другой html страницей, при этом должна остаться сессия.
Подскажите как это реализовать, буду безмерно благодарен вам за помощь!!
  • Вопрос задан
  • 840 просмотров
Пригласить эксперта
Ответы на вопрос 1
@karatel318
py-dev
для Electron 0.35.0 и выше есть ipcMain и ipcRenderer:
// In main process.
const ipcMain = require('electron').ipcMain;

// in main process, outside of app.on:
ipc.on('load-page', (event, arg) => {
    mainWindow.loadURL(arg);
});

// In renderer process (web page).
const ipc = require('electron').ipcRenderer;
ipc.send('load-page', 'file://' + __dirname + '/prefs.html');

Это, что касается создания окон в Electron. На счёт сохранения сессии, к сожалению, не подскажу.
Чем богаты, как говорится :)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы