无法读取路由“/index”中的 cookie 'a=a;path=/index'

Question

// App.js
render() {
  return (
    <Switch>
      <Route exact path="/" component={A} />
      <Route path="/index" component={B} />
    </Switch>
  )
}

// A.jsx
import Cookies from 'universal-cookie'

handleClick = () => {
  const cookies = new Cookies()
  cookies.set('a', 'a', { path: '/index' })
  this.props.history.push('/index')
}

render() {
  return <Component onClick={this.handleClick} />
}

// B.jsx
import Cookies from 'universal-cookie'

componentDidMount() {
  const cookies = new Cookies()
  console.log(cookies.get('a')) // undefined
}

当从路由“/”链接到路由“/index”时，我无法读取 componentDidMount 中的 cookie 'a'。为什么会这样？以及如何在 B.jsx 中访问 cookie 'a'?

Answer 1

您似乎只为路径 /index 设置 cookie，这意味着此 cookie 仅对名为 /index 的 url 可见。您甚至可以在 chrome 开发工具中检查列 Path。只需将 cookie 设置为 /.

Answer 2

我能够复制 OP 中所述的行为并进行了一些观察。

这是我发现的：假设我们有一个 cookie path='/index'.

当我从路径为 /index 的任何页面设置 cookie 时。只有当我直接登陆 /index 页面时，该 cookie 才能访问。然后我可以在通过反应设置的任何路径上访问该路径特定的 cookie。
如果我登陆任何其他页面，它会显示 cookie 值未定义。

原因是 React 在内部使用 historyAPI 进行客户端导航，并且 cookie 不将 historyapi 修改后的路径视为 url，因此不提供 cookie 数据。

可以找到一点解释

因此，为了获取cookie数据，您需要设置path='/'，因为它会允许在网站的所有页面上使用cookie，从而允许在网站的任何地方访问cookie，从而获取cookie数据与用户最初登陆的位置以及使用 historyapi 导航的 url 无关。

无法读取路由“/index”中的 cookie 'a=a;path=/index'

Can't read cookie 'a=a;path=/index' in route '/index'

javascript

cookies

reactjs