Почему не срабатывает редирект?

Question

[PlasterTom]

Я пытаюсь перенаправить пользователя на страницу '/welcome' после успешной авторизации, но этого не происходит. С текущим кодом пользователь так и остается на странице логина. Я ожидаю перенаправления в строке " return fetch('/welcome', fetchOptions2 )" - и похоже, что не совсем верно понимаю, как работает fetch, раз перенаправления не происходит; Статус ответа сервера 304 Not Mofified. Проверка через postman показала, что сервер работает корректно.

Вот мой код на клиенте:

const formEl = document.getElementById('form-submit');
formEl.addEventListener('submit', function(event) {
    event.preventDefault();

    // 1.Headers
    const headers1 = new Headers();
    headers1.set('Accept', 'application/json');

    const headers2 = new Headers();
    headers2.set('Authorization', localStorage.getItem('token'));

    const formData = new FormData(formEl);

    // 2. Make the requests
    const url = '/auth/login';
    const fetchOptions1 = {
        method: 'POST',
        headers: headers1,
        body: formData
    };

    const fetchOptions2 = {
        method: 'GET',
        headers: headers2
    };

    const responsePromise = fetch(url, fetchOptions1);

    responsePromise
        .then(function(response) {
            return response.json();
        })
        //Do something with the JSON data
        .then(function(jsonData) {
            window.localStorage.setItem('token', jsonData.token);
            //and another fetch
            return fetch('/welcome', fetchOptions2 ); //здесь я ожидаю перенаправления

        })
        .then(function(response) {
            console.log(response);
        })
        .catch(function(error) {
            console.log('Request failed', error)
        });
});

Сервер:

router.get('/welcome',
    passport.authenticate('jwt', { session: false }),
    (req, res) => {
    res.render('welcome.ejs')
});

Ну и второй вопрос. Что если пользователь попытается зайти на страницу welcome, вбив это в строку браузера, как в таком случае устанавливать заголовок? 'Authorization', localStorage.getItem('token'). Видел как это делается в реакте - в корневом компоненте. Но в этом приложении у меня другая логика - сервер отдает шаблоны. Как это сделать в таком приложении не совсем понимаю.

Answer 1

[Алексей Шашенков]

window.localStorage.setItem('token', jsonData.token);
            //and another fetch
            return fetch('/welcome', fetchOptions2 ); //тут просто скрытый запрос на сервер

window.localStorage.setItem('token', jsonData.token);
 location.href='/welcome' // тут редирект на др страницу фронта

Comments

[PlasterTom]

Я использовал fetch, чтобы вручную прописать в заголовок токен:

const headers2 = new Headers();
    headers2.set('Authorization', localStorage.getItem('token'));

const fetchOptions2 = {
        method: 'GET',
        headers: headers2
    };

return fetch('/welcome', fetchOptions2 );

А если перенаправлять через location.href, заголовки не устанавливаются, авторизация не проходит. Можно ли как-то совместить эти два подхода?

[Алексей Шашенков]

PlasterTom, А заголовок точно есть? Может быть что вы не успеваете взять из localStorage token и запрос идет без токена, на странице /welcome. Просмотрите содержимое localStorage во время отправки запроса. Если ван надо отрисовать полностью на сервере /welcome, то лучше использовать куки, или передать токен в url (последнее небезопасно) Лучше используйте куки.

[PlasterTom]

Алексей Шашенков, заголовок точно есть, проверял. Спасибо за ответ, буду разбираться с куки.
Записывать в заголовок - не очень распространенная практика? Вопрос из любопытства. Видел такое решение в реакте, решил перенести и в этот проект, но тут как вы уже заметили, появились трудности.

[Алексей Шашенков]

PlasterTom, Если это запрос со страницы, axaj, то не вопрос. Но модифицировать нативный переход не получится, те в редирект не получится всунуть свои заголовки.