Как отправить данные сервера в многостраничное веб-приложение?

Question

В эти дни я создал стандартную домашнюю страницу, страницу входа и страницу с информацией о пользователе. На моей странице входа в систему, используя методы POST и Ajax (Fetch), я отправляю электронное письмо и пароль на сервер, сервер отвечает правильным json с информацией о пользователе, которая принадлежит этому электронному письму. НО я понятия не имею, как эту пользовательскую информацию в JSON можно использовать в другом HTML документе, таком как страница с информацией о пользователе. Я пробовал так много вещей, но ничего не помогло мне.

form.addEventListener('submit',(e)=>{

e.preventDefault();

    const data={}

    data1.correo=email.value;
    data1.contrasenia=password.value;


        const miinit={
        method:'POST',                    
        headers: {"Content-type":"application/json"},
        body:JSON.stringify(data1)}

        const url='https://localhost:44351/api/login';

        const myrequest =new Request(url,miinit)

    const requestpost=()=>{

        fetch(myrequest).then(response=>{console.log(response);return response.json()}).then(response=>{console.log(response)})
    }    

    requestpost()
})

Answer 1

Я предполагаю, что вы делаете все это без какой-либо библиотеки или чего-либо еще. Учитывая это, я предполагаю, что каждый переход страницы будет полной страницей refre sh. Это означает, что ваш объект, возвращаемый API, работает так же хорошо, как и время жизни вашей страницы входа.

У вас есть две опции, которые будут работать с вашей настройкой:

1. Использовать localStorage для хранения текущих пользователей JSON полезная нагрузка.

const payload = { userId: 1, name: 'Test' };
// The item being saved to localStorage must be
// a string. You serialize/deserialize as your
// set/get if need be.
localStorage.setItem('currentUser', JSON.stringify(payload));

// On some other page, calling localStorage.getItem
// will give you the object
console.log(localStorage.getItem('currentUser'));

Предполагая, что у вас есть контроль над внутренним кодом и доступен сеанс, создайте новый метод API, который будет возвращать текущий объект пользователя. Вы можете вызывать метод getCurrentUser на каждой странице, и он будет возвращать того, кто вошел в систему.

Обе эти опции имеют точки безопасности, о которых стоит подумать, но вопрос не в этом. , Я думаю, что для вас самый простой вариант - просто сохранить объект в Local Storage, но я бы не рекомендовал для производственной установки. Если вы пытаетесь сделать что-то готовое к работе, я бы порекомендовал вам изучить аутентификацию JWT.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://jwt.io/introduction/

Answer 2

Если вы хотите использовать информацию, возвращаемую с сервера, на нескольких страницах, вам нужно будет сохранить ее в LocalStorage или другом постоянном API. Данные не распределяются по страницам.