【Vue】Nuxt Apolloでの認証トークンに関する実装のメモ

概要

Nuxt Apolloとは、Nuxt.jsにおけるApolloのGraohQLのモジュールです。
認証を行う際は基本的にヘッダーのAuthorizationにてトークンで行う形になるのですが、どのように実装すべきなのかというメモ書きです。

前提

• 使用したNuxt.jsのバージョンは3.11.2です。
• 使用したNuxt Apolloのバージョンはv5.0.0-alpha.14です。この記事を書いた時点（2024年5月）では、まだアルファ版の状態ですのでご留意ください。

実装のポイント

トークンの保存方法の設定

ドキュメントのAuthenticationにある通り、トークンの保存方法を設定できます。
localStorageにて行う場合は、以下のようにnuxt.config.tsを設定します。

nuxt.config.ts

  apollo: {
    clients: {
      default: {
        authType: "Bearer",
        authHeader: "Authorization",
        tokenStorage: "localStorage",
        httpEndpoint: process.env.API_ENDPOINT ?? "",
        wsEndpoint: process.env.API_ENDPOINT ?? "",
      },
    },
  }

トークンの保存

ドキュメントのonLoginにある通り、onLoginメソッドにてトークンの保存ができます。
実装は以下のような感じです。

export const authSet = async (
  token: string
) => {
  const { onLogin } = useApollo()
  // onLoginは非同期処理
  await onLogin(token)
}

トークンの削除

ドキュメントのonLogoutにある通り、onLogoutメソッドにてトークンの削除ができます。
実装は以下のような感じです。

export const authRemove= async () => {
  const { onLogout } = useApollo()
  // onLogoutは非同期処理
  await onLogout
}