Я новичок в JavaScript и веб-программировании.Я пытаюсь создать конфигурационную веб-страницу для продукта, который я написал с помощью node.js.по этой причине я использовал экспресс как бэкэнд и некоторые html, css и javascript на фронтэнде.Сценарий таков:
- Клиент открывает страницу входа в систему, на которой ему необходимо ввести имя пользователя и пароль.
после нажатия кнопки входа в систему значения имени пользователяи пароль отправляются для экспресс-отправки с использованием почтового запроса на адрес «/ login», и, если учетные данные верны, токен в качестве ответа будет отправлен обратно клиенту и будет установлен в локальном хранилище клиента.
Клиент автоматически отправляет запрос GET на адрес «/ config», где появляется защищенная html-страница, которая проверяет токен при загрузке, отображает и отображает некоторые поля.
проблема в том, что когда второй этап завершается, клиент отправляет запрос GET в / config, но ответ не загружается на странице, но я вижу страницу ответа в google chrome> Инструменты разработчика> Раздел сети.
IЯ использую Axios для отправки запроса и выразить в качестве внутреннего веб-сервера.
вот мой внутренний код с помощью экспресс:
const config = require('config');
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const app = express();
const jwt = require('jsonwebtoken');
const port = 3333;
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'webconfig', 'login.html'))
});
app.get('/config', verifyToken,(req, res)=> {
console.log('GET /config data');
res.sendFile(path.join(__dirname, 'webconfig', 'config.html'));
});
app.post('/login', (req, res) => {
console.log('POST /login');
const {body} = req;
if (body.username === config.web.username && body.password === config.web.password) {
const user = {
id: 1,
username: 'admin'
};
jwt.sign({user}, jwt_secret, {expiresIn: '3000s'}, (err, token) => {
console.log('Token sent to client');
res.send({
token: token,
});
});
} else {
console.log('User pass mismatch');
res.redirect('/')
}
});
это мойjs на стороне клиента, который срабатывает при нажатии кнопки:
const username = document.getElementById('username');
const password = document.getElementById('password');
async function login() {
axios.post('/login', {
"username": username.value,
"password": password.value
})
.then(function(res) {
window.localStorage.setItem('token', res.data.token);
let token = window.localStorage.getItem('token');
if (token !== 'undefined'){
axios.get('/config',{headers:{Authorization:'Bearer ' + token }})
} else {
window.location.href = '/'
}
})
.catch(function(err) {
console.log(err)
});
}
}
функция verifyToken - это промежуточное ПО, которое проверяет токен и вызывает следующую функцию.
после всего, что я упомянул, я новичок ввеб-разработка, поэтому любая помощь приветствуется.