Appllo+NuxtでLocalStorageのjwtをリクエストヘッダーに動的に追加したい

Question

困ったこと

1. ログイン処理でLocalStorageにjwtをsetItem()
2. 別ページでjwtをリクエストヘッダーに含めてリクエストしたいが含まれない

apolloの初期設定でリクエストヘッダーが固定されている？

LocalStorageの値が変わったら動的にリクエストヘッダーの値を変える方法があればご教授いただきたいです。
あるいはQueryを叩くときにリクエストヘッダーを指定する方法でも可能だと思います。

ソースコード

nuxt.config.js

modules: [
    "@nuxtjs/apollo"
  ],

  apollo: {
    clientConfigs: {
      default: "~/apollo/default.js"
    }
  }

~/apollo/default.js

import { ApolloLink } from "apollo-link";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";

export default ({ redirect }) => {
  const httpLink = createHttpLink({ uri: process.env.API });

  // auth
  let token = "";
  if (process.client) {
    token = window.localStorage.getItem("jwt");
  }
  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        Authorization: token ? `Bearer ${token}` : ""
      }
    };
  });

  const link = ApolloLink.from([authLink, httpLink]);

  return {
    link
  };
};

ログイン処理

 function login() {
   hogehoge().then((jwt) => {
    localStorage.setItem("jwt", jwt);
  })
 }

Queryを叩く

  async piyo() {
    const { data } = await this.$apollo.query({
       query: PIYO_QUERY
    });
  }

確認したこと

• ログイン処理でjwtは取得できている

• 検証ツールのApplication>Storage>Local Storageにjwtは存在する

• NetworkのRequest Headers>authorizationはBearer になってしまう(Bearer xxxxxにしたい)

補足情報（FW/ツールのバージョンなど）

"nuxt": "^2.14.12",
"apollo-link-http": "^1.5.17"

Answer 1

nuxt.config.jsにtokenNameを指定したらCookieで取得できた。
公式ドキュメントにはLocalStorageと書いてあるのでLocalStorageでもできるのかもしれない(手元の環境では再現できなかった)。

apollo: {
    clientConfigs: {
      default: {
        tokenName: "jwt"
      }
    }
  }