Svelte Sapper сохраняет сеанс при обновлении страницы (перезагрузка)

Похоже, вы взяли большую часть своего кода из проекта sapper realworld (поправьте меня, если я неправильно), но вы забыли реализовать серверный «api route», чтобы добавить в сеанс только что вошедшего пользователя.

В проекте realworld, когда пользователь входит в систему, выполняется запрос POST на серверный /auth/login маршрут, который обслуживается следующей функцией:

import * as api from 'api.js';

export function post(req, res) {
    const user = req.body;

    api.post('users/login', { user }).then(response => {
        if (response.user) req.session.user = response.user;
        res.setHeader('Content-Type', 'application/json');

        res.end(JSON.stringify(response));
    });
}

Что делает эта функция:

1. он передает запрос /users/login конечной точке API проекта realworld
2. если ответ на этот запрос содержит объект user, он сохраняет этот объект в сеансе на стороне сервера
3. он возвращает исходный ответ API в виде JSON обратно в приложение, где он используется для заполнения хранилища сеансов (если исходный ответ содержал объект пользователя)

Учитывая, что вы, очевидно, НЕ используете API реального мира для аутентификации, а ваш собственный процесс аутентификации, вам нужно добавить такой же серверный маршрут, как и приведенный выше, но который:

• вместо этого передайте запрос на вход в ваш собственный процесс,
• введите ответ и используйте этот ответ для установки пользователя сеанса,
• и, наконец, передать ответ клиенту (или, в качестве альтернативы, передать либо пользовательский объект, сохраненный в сеансе, либо сообщение об ошибке).

Учитывая вызовы API, которые вы используете для установки пользователя на стороне клиента в вашем коде, эта функция будет выглядеть примерно так (например, сохраните этот файл как /routes/auth/login.js):

import * as api from 'api.js';

export async function post(req, res) {
    const { email, password } = req.body;
    const authToken = await api.post("/login", { email, password });
    api.defaults.headers.common["Authorization"] = `Bearer ${authToken.data}`;
    const user = await api.get("/me");
    if (user) req.session.user = user.data;
    res.setHeader('Content-Type', 'application/json');
    res.end(JSON.stringify(user));
}

и метод handleSubmit в вашем login.svelte файле станет следующим:

  const handleSubmit = async () => {
    try {
      errors = null;
      disabled = true;
      // substitute your auth API request chain with a proxy request to
      // the server-side API where you will set the server-side session user
      const user = await fetch('/auth/login', {
        method: 'POST',
        credentials: 'include',
        body: JSON.stringify({ email, password }),
        headers: { 'Content-Type': 'application/json' },
      })
      session.set({ user: user.data });
      disabled = false;
      goto("/");
    } catch (e) {
      errors = e;
      disabled = false;
    }
  };

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

Используйте изящный localStorage:

Создайте магазин, например myStore.js

import { writable } from 'svelte/store';

export let mystore = writable({
    session: ""
});


export function setSession(session) {
    mystore.set({
        session: session
    });
    session = session; // refresh UI
}

Подпишитесь на него в routes / _layout.svelte

<script>
    import {mystore, setSession} from './myStore.js'

    let session = setSession("A_SESSION"); // here comes the session


    const unsubscribeMyStore = mystore.subscribe(value => {
        session = session;
    });
</script>

<A_COMPONENT bind:session={$mystore}/> // if the component exports session

Использовать в A_COMPONENT:

<script>
    export let session;
</script>

<div>
{session.session}
</div>