从 React SSR 访问 cookie答案

【问题标题】：Accessing cookies from React SSR从 React SSR 访问 cookie
【发布时间】：2019-10-15 20:19:28
【问题描述】：

这是简单的事情。 React路由重定向路径取决于cookies中的值，那么Server端如何处理呢？

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 方法将元素解析为字符串，忽略此条件，即使我设置了 cookie，我也会得到错误的重定向

【问题讨论】：

你的设置是什么？这是特定于您如何执行 SSR 的。如果您使用 Next，您可能会使用一些解决该问题的第三方插件。否则，您将需要以某种方式将 `cookies 与服务器 cookie 链接起来。
我在我的项目中使用universal-cookie，效果很好

标签： reactjs server-side-rendering

【解决方案1】：

使用 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)

【讨论】：

【解决方案2】：

我也遇到过类似的问题。已解决：

将包含 cookie 的额外 prop（此处为 serverCookie）传递给您在 renderToString 中的路由。
在渲染方法中（您已定义所有路由/重定向）；检查它是否在客户端或服务器上被调用。如果它在服务器端，请使用包含 cookie 的新道具（此处：serverCookie），否则使用客户端的 cookie.get。
在客户端呈现路由时，额外的 prop（此处为 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-parser 正确解析您的 cookie。

希望它能帮助并解决您的问题。如有任何疑问/澄清，请回复。

【讨论】：