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)
})