aws-amplifyJavaScriptNode.js

AWS Amplifyで、ログインユーザーのJWTをfetchのHeaderで渡す方法

基本的には、APIもAmplifyで管理して、APIクラスを使ったAPI呼び出しを行います。 同じCognito User Poolsを使う、Amplifyで管理されていないAPIを呼び出すケースでは、Authoriza […]

広告ここから
広告ここまで

基本的には、APIもAmplifyで管理して、APIクラスを使ったAPI呼び出しを行います。

API.get('MyApiName', '/path')

同じCognito User Poolsを使う、Amplifyで管理されていないAPIを呼び出すケースでは、Authorizationヘッダーを自前で追加します。

  const session = await Auth.currentSession()
  const token = session.getAccessToken().getJwtToken()
  if (!init.headers) init.headers = {}
  const result = await fetch('/api', {
    method: 'get',
    headers: {
      Authorization: token,
    },
  })

便利関数にする

都度コードを書くのは手間なので、関数にしましょう。

import { Auth } from 'aws-amplify'

export const callAPIWithAuth = async (
  input: RequestInfo,
  init: RequestInit = {},
): Promise<Response> => {
  const session = await Auth.currentSession()
  const token = session.getAccessToken().getJwtToken()
  if (!init.headers) init.headers = {}
  const result = await fetch(input, {
    ...init,
    headers: {
      ...init.headers,
      Authorization: token,
    },
  })
  return result
}

fetchのように使えばOKです。

    callAPIWithAuth('/api/bookmarks', {
      method: 'GET',
    })
      .then((data) => data.json())
      .then(async (bookmarks) => {
        console.log(bookmarks)
      })
      .catch((e) => {
        console.log(e)
      })

ブックマークや限定記事(予定)など

WP Kyotoサポーター募集中

WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。

14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。

広告ここから
広告ここまで

Related Category posts