Question

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

在Main组件中，我使用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']
  }
}

正在使用请求标头来获取cookie值，这只会在您向服务器发出请求后（刷新页面时）才会发生。当在浏览器中导航时，代码不会运行，并且您没有获得cookie。这就是为什么你需要直接从浏览器document.cookie获取你的cookie。

考虑使用localStorage来保存身份验证令牌而不是cookie，它有更好的api。

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

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

我假设您使用cookies-js

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

1 个答案: