Доступ к файлам cookie из React SSR

Question

Вот простая вещь. Реактивный путь перенаправления маршрутизации зависит от значения в файлах cookie, так как мне его обработать на стороне сервера?

render() {
  something = cookie.get('my-something-value') || 'default '; // always takes defualt value beacuse cookies are not available 
  return (
    <Switch>
      <Route />
      <Route />
      <Redirect to={`/something/${val}`}/>
    </Switch>
  )
}

Так renderToString метод на сервере анализирует элементы в строку, игнорируя это условие, и я получаю неправильное перенаправление, хотя у меня установлены куки

Answer 1

Я столкнулся с подобной проблемой. Это было решено путем:

• Передайте дополнительную информацию (здесь: serverCookie), содержащую cookie, вашим маршрутам в renderToString.
• В методе рендеринга (где вы определили все маршруты / редирект); проверьте, вызывается ли он на клиенте или сервере. Если это на стороне сервера, используйте новый prop (здесь: serverCookie), содержащий cookie, в противном случае используйте cookie.get со стороны клиента.
• Дополнительная информация (здесь: serverCookie) недоступна, когда маршруты отображаются на стороне клиента.

Мой renderToString на стороне сервера выглядел примерно так:

renderToString(
  <Provider store={store}>
    <StaticRouter ...>
      <MyRoutes ... serverCookie={req.headers.cookie} />
    </StaticRouter>
  </Provider>
)

Файл MyRoutes выглядел так:

render(){
  const cookie = isServerSide
    ? this.props.serverCookie
    : cookie.get('my-something-value')
  const path = cookie ? "/pathC" : "/pathD"
  return (
    <Switch>
        <Route
          path="/pathA"
          component={ComponentA}
        />
        <Route
          path="/pathB"
          component={ComponentA}
        />
        <Redirect to={path} />
      ...
    </Switch>
  )
}

Примечание. Перед использованием вам необходимо правильно проанализировать файлы cookie с помощью некоторого анализатора файлов cookie.

Надеюсь, это поможет и решит вашу проблему. Возврат для любых сомнений / разъяснений.

Answer 2

Использовать промежуточное ПО для парсера файлов cookie

npm i cookie-parser

пример

var express = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function (req, res) {
  // Cookies that have not been signed
  console.log('Cookies: ', req.cookies)

  // Cookies that have been signed
  console.log('Signed Cookies: ', req.signedCookies)
})

app.listen(8080)