ReactJS/nextJS：重定向后无法访问 cookie/properties

Question

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

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

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

登录

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 代替 cookie 来保存身份验证令牌，它有更好的 api。

由于componentDidMount只在浏览器中执行，所以用它来获取cookie值并将其放在redux存储中：

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

我假设你使用 cookies-js

ReactJS/nextJS：重定向后无法访问 cookie/properties

ReactJS/nextJS: Don't get access to cookie/properties after redirecting

javascript

cookies

reactjs

nextjs