Пиши на сессию с Сапером и Славте - PullRequest
Новая
       10

Пиши на сессию с Сапером и Славте

2 голосов
/ 22 февраля 2020

Я написал приложение Sapper с управлением сессиями по примеру RealWorld : 

polka()
  .use(bodyParser.json())
  .use(session({
    name: 'kidways-app',
    secret: 'conduit',
    resave: false,
    saveUninitialized: true,
    cookie: {
      maxAge: 31536000
    },
    store: new FileStore({
      path: 'data/sessions',
    })
  }))
  .use(
    compression({ threshold: 0 }),
    sirv('static', { dev }),
    pdfMiddleware,
    sapper.middleware({
      session: req => ({
        token: req.session && req.session.token
      })
    })
  )
  .listen(PORT, err => {
    if (err) console.log('error', err);
  });

Затем на моем _layout.sevlte: 

<script context="module">
  export async function preload({ query }, session) {
    console.log('preload', session)
    return {
      // ...
    };
  }
</script>

<script>
  import { onMount, createEventDispatcher } from 'svelte';
  import { Splash } from 'project-components';
  import * as sapper from '@sapper/app';
  import { user } from '../stores';
  import client from '../feathers';

  const { session } = sapper.stores();

  onMount(async () => {
    try {
      await client.reAuthenticate();
      const auth = await client.get('authentication');
      user.set(auth.user);
      $session.token = 'test';
    } catch (e) {
    } finally {
      loaded = true;
    }
  });

  console.log($session)
</script>

<h1>{$session.token}</h1>

Эта работа над рендеринг на стороне клиента, но токен все еще не определен при предварительной загрузке, из-за чего рендеринг моего шаблона SSR прервался.

Что я пропустил?

1 Ответ

3 голосов
/ 23 февраля 2020

Когда страница отображается, session заполняется в соответствии с возвращаемым значением функции, которую вы указали здесь: 

sapper.middleware({
  session: req => ({
    token: req.session && req.session.token
  })
})

Таким образом, в то время как клиент может иметь до -date token, он не вступит в силу при перезагрузке страницы, если вы каким-либо образом не сохраните токен на сервере таким образом, чтобы промежуточное программное обеспечение сеанса узнало об этом.

Как правило, этого можно добиться, имея сервер маршрут, как routes/auth/token.js или что-то ... 

export function post(req, res) {
  req.session.token = req.body.token;

  res.writeHead(200, {
    'Content-Type': 'application/json'
  });

  res.end();
}

... и отправка токена от клиента: 

onMount(async () => {
  try {
    await client.reAuthenticate();
    const auth = await client.get('authentication');
    user.set(auth.user);

    await fetch(`auth/token`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ token })
    });

    // writing to the session store on the client means
    // it's immediately available to the rest of the app,
    // without needing to reload the page
    $session.token = 'test';
  } catch (e) {
  } finally {
    loaded = true;
  }
});
...