ReactJS/nextJS：リダイレクト後にクッキー/プロパティへのアクセスを取得しない

Question

私のnextJSアプリケーションでは、ユーザーはログイン（ログインページ）を行うことができ、トークンを含むクッキーを作成し、ルート（メインページ）主成分を使用します。

メインコンポーネントでは、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

...私は、サーバー側で何かを間違ってやっていると思います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が取得されない場合それで、あなたはブラウザdocument.cookieから直接クッキーを入手する必要があります。

cookieの代わりにauthトークンを保存するためにlocalStorageを使用することをお勧めします。

componentDidMountは、クッキーの値を取り、Reduxのストアに配置するためにそれを使用する、唯一のブラウザで実行されているので：

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

私はあなたがログインした後、あなたがcookies-js