javascript - ReactJS/下一个JS : Don't get access to cookie/properties after redirecting

Question

在我的 nextJS 应用程序中，用户可以进行登录(登录页面)，这会创建一个带有 token 的 cookie 并重定向到使用主要组件的路由(主页)。

在主要组件中，我使用 getInitialProps 来获取 cookie token 。但这仅在刷新页面后有效。所以现在我正在登录并被重定向。如果我单击按钮，则没有 token 。刷新页面后，我确实得到了一个 token 。

我怎样才能避免这种情况？我想我在服务器端做错了什么......

登录

export class Login extends Component {
  render () {
    return (
      <Form id='login' onSubmit={this._onSubmit.bind(this)}>
        // Input fields
      </Form>
    )
  }

  _onSubmit = (event) => {
    event.preventDefault()
    const { username, password } = this.state

    // Sends mutation request to graphQL server
    this.props.signinUserMutation({
      variables: { username, password }
    }).then(response => {
      // Returns token
      const token = response.data.token
      if (token) {
        Cookies.set('auth-token', token)
        this.props.client.resetStore().then(() => {
          redirect({}, '/main')
        })
      }
    })
  }
}

主要

class Main extends Component {
  static async getInitialProps (context, apolloClient) {
    const { req } = context
    const initProps = {}

    if (req && req.headers) {
      const cookies = req.headers.cookie
      if (typeof cookies === 'string') {
        const cookiesJSON = jsHttpCookie.parse(cookies)
        initProps.token = cookiesJSON['auth-token']
      }
    }

    return initProps
  }

  clickIt = () => {
    console.log(this.props.token)
  }

  render () {
    return (<Button onClick={this.clickIt.bind(this)})
  }
}

Answer 1

登录后你的cookie保存在浏览器中，所以你应该在getInitialProps中使用document.cookie来获取cookie值。

据我理解这段代码:

if (req && req.headers) {
  const cookies = req.headers.cookie
  if (typeof cookies === 'string') {
    const cookiesJSON = jsHttpCookie.parse(cookies)
    initProps.token = cookiesJSON['auth-token']
  }
}

使用请求 header 获取 cookie 值，这只会在您向服务器发出请求后(刷新页面时)发生。当在浏览器中导航时，代码不会运行，你也不会得到 cookie。这就是为什么您需要直接从浏览器 document.cookie 获取您的 cookie。

考虑使用 localStorage 来保存 auth token 而不是 cookie，它有更好的 api。

由于 componentDidMount 仅在浏览器中执行，因此使用它来获取 cookie 值并将其放置在 redux store 中:

componentDidMount() {
    placeTokenInReduxStoreAction(Cookies.get('auth-token'));
}

我假设你使用 cookies-js