expess-session
хранит куки на клиенте.
Однако, поскольку я использую рендеринг на стороне сервера (с next.js), первый запрос не содержит информации о клиенте, потому что клиент еще не существует в браузере.
Я пишу неловкий код для учета этого случая, ожидаю загрузки компонента, затем отправляю запрос на аутентификацию и т. Д., И это не только выглядит как плохой шаблон, но и не является идеальным для пользователя так как есть страница флеш.
import * as React from 'react'
import {
getUrl
} from 'Root/helpers/fetch-helpers'
import Router from 'next/router'
const securePage = Page => class SecurePage extends React.Component {
static async getInitialProps(ctx) {
let authenticated = false;
try {
/* either in server or from client we fetch the auth status */
const jsonRes = await getUrl(`/api/employers/check-auth`);
if (jsonRes.authenticated) {
authenticated = true;
} else {
console.warn("Not authenticated to view the page");
}
} catch (err) {
console.error("API Auth callback error: ", err);
}
let language;
if (ctx.req) {
/* REDIRECT in case of un authenticated access */
if (!authenticated) {
// ctx.res.writeHead(302, {
// Location: '/employers'
// })
// ctx.res.end()
}
language = ctx.req.session.language;
} else {
if (!authenticated) {
Router.push("/employers");
}
language = localStorage.getItem('language');
}
let props = {}
if (Page.getInitialProps) {
const pageProps = await Page.getInitialProps(ctx);
props = { ...pageProps,
language
}
}
return props;
}
async componentDidMount() {
let {
language
} = this.props;
if (language) {
/* if we were able to fetch the language, set it here */
localStorage.setItem('language', language);
this.state = {};
} else {
language = localStorage.getItem('language');
this.state = { language };
}
const jsonRes = await getUrl(`/api/employers/check-auth`);
if (!jsonRes.authenticated) {
Router.push("/employers");
}
}
render() {
console.log("pre-render page props ", this.props);
if (this.state && this.state.language) {
return <Page { ...this.props } language={this.state.language} />
} else {
return <Page { ...this.props } language={this.props.language} />
}
}
}
export default securePage
Есть ли способ, которым я мог бы вызвать правильный объект экспресс-сеанса при первом запросе, еще до того, как клиент был в браузере пользователя. Есть ли лучший модуль (или метод?), Который учитывал бы этот шаблон?