У меня есть веб-приложение, отображаемое на стороне сервера React.
Когда пользователь запрашивает «myapp.com/data», у меня есть подстановочный маршрут Node Express, настроенный для перехвата этого запроса. Внутри этого обработчика маршрута я создаю хранилище Redux для сервера, а затем визуализирую
app.get("/*", (req, res) => {
const content = renderToString(
<Provider store = {store}>
<StaticRouter location = {req.path} context = {{}}>
<Routes />
</StaticRouter>
</Provider>
);
// send a bunch of HTML to client with {content} inside the React root div
}
Очевидно, у меня есть код на стороне клиента для гидратации контента. Я создаю другой магазин для клиентской стороны, но не думаю, что это имеет отношение к вопросу.
const store = createStore(
reducers,
{},
composeEnhancers(applyMiddleware(thunk))
);
const jsx = (
<Provider store = {store}>
<BrowserRouter>
<Routes />
</BrowserRouter>
</Provider>
);
ReactDOM.hydrate(jsx, document.querySelector("#react-root"));
У меня есть служба, настроенная для получения и настройки файла cookie с использованием «универсального файла cookie».
import Cookie from "universal-cookie";
...
...
login(args) {
const cookie = new Cookie();
return new Promise((resolve, reject) => {
fetch(`${apiURLs.login}`, {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(args)
})
.then(response => {
if (response.status !== 200)
throw { status: response.status, message: response.message };
return response.json();
})
.then(json => {
cookie.set("authToken", json.authToken);
resolve(json);
})
.catch(error => {
reject(error);
});
});
}
Это все работает нормально.
Внутри моего клиентского кода я создал компонент.
import Cookie from "universal-cookie";
...
...
const PrivateRoute = ({ component: Component, ...rest }) => {
const cookie = new Cookie();
const authToken = cookie.get("authToken");
console.info("Auth Token inside <PrivateRoute /> = ");
console.info(authToken);
return (
<Route
{...rest}
render = {props => {
return AuthService.checkToken("authToken").then(response => {
return response.success;
}) === true ? (
<Component {...props} />
) : (
<Redirect
to = {{
pathname: "/login",
state: {
referrer: props.location
}
}}
/>
);
}}
/>
);
};
ПРОБЛЕМА (tl;dr):
const authToken = cookie.get("authToken");
console.info("Auth Token inside <PrivateRoute /> = ");
console.info(authToken);
Внутри моего компонента PrivateRoute токен авторизации регистрирует «неопределенный» в сгенерированном сервером коде и возвращает правильное значение на стороне клиента.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Как universal-cookie lib получает куки?
Из документов вам нужно передать заголовок файла cookie конструктору.
// Server Example
import Cookies from 'universal-cookie';
const cookies = new Cookies(req.headers.cookie);
console.info(cookies.get('myCat')); // Pacman or undefined if not set yet
Я бы посоветовал вам реорганизовать этот код, чтобы ваш компонент не знал источник данных (куки).
Один из распространенных вариантов — поместить его в хранилище избыточности всякий раз, когда вы создаете хранилище (может быть и в исходном хранилище).
При таком подходе вам нужно будет прочитать файл cookie на стороне клиента (при инициализации хранилища в этом случае прочитайте файл cookie из document.cookie) и на стороне сервера (при инициализации хранилища в этом случае прочитайте его из объекта запроса) .