apollo-moduleを利用した際、再ログインしたときにtokenをリフレッシュする

はじめに

nuxt-community/apollo-moduleを利用している場合、apollo-linkなどのインスタンスを生成する為に、クライアント向けのコンフィグを書かれるかと思います。nuxt.config.jsのapolloエンティティにclientConfigsとして指定するコンフィグです。

上記の通り、このコンフィグで認証用のトークンをapollo-moduleのインスタンスに設定し、以降のリクエストについて認証を利かせる、といったやり方がよくあるパターンのようですね。

ただ、このままですと再ログインした時に少し問題が発生します。

こちらのインスタンスは、画面のリロードに際して、その読み込みが行われます。なので再ログイン時には、インスタンスは古いものが残り続けてしまい、正しく認証が行われない、といった挙動となります。

これを防ぐ為には、以下の通りlogin処理後にreloadを挟むと便利です。

reloadによりコンフィグが再読込されて、新しいトークンを含むインスタンスが再生成されます。

Vue.js

Posted by poison