やっほー
【Angular】CognitoのsessionStorageがうまく使えない問題!

【Angular7】CognitoのsessionStorageがうまく使えない問題!

  • 2019年2月15日
  • 2021年3月19日
  • Angular
  • 87view

Angular×Cognitoを使う際、当然AWSのライブラリを使用するかと思います。

AWSのライブラリではデフォルトでStorageを指定するようになっています。

つまり、localStorageもしくはsessionStorageを使って認証情報(トークン)を保持する構成なわけです。

が、localStorageからsessionStorageに変更するとシステムがうまく動かなくなりました。。

ということで今回は、CognitoのsessionStorageがうまく使えない問題を解決する方法を解説します!

関連記事

Angular7でCognito認証を実装したい。 でも、よう分からん! ということで、様々なサイトを参考に、ログイン処理やAPI処理をAngular7で実装してみました。 [sitecard subtitle=Angular[…]

Angular7×Cognitoでログイン・API処理を実装!

CognitoユーザにはStorageを指定する箇所がある

上記のように、CognitoUserにはStorageを指定する箇所があります。
これを「sessionStorage」に変更するとうまく動かなくなるわけです。

なぜsessionStorageにするとうまく動かないのか?

一瞬ライブラリのバグかなと思って殺意が芽生えたのですが、「そんなわけないか」と思い、再度考え直してみました。

エラーが出たというよりは、sessionStorageから値が取得できていないっぽかったのです。

ということは、他にもstorageの指定をする箇所があって、1つだけ指定してもだめということなのかなと思いました。

Storageの指定箇所はCognitoUser以外にもある?

Cognitoを使う際にユーザプールを作成しますが、ここが何か怪しいなと思ったのです。で、「CognitoUserPool」の定義を開いてみました。

CognitoUserPool

constructor」で「ICognitoUserPoolData」を受け取っているので、この定義も見てみます。

ICognitoUserPoolData

むむっ。Storageの指定があるではないか!
ここにも「sessionStorage」の指定が必要なようですね。

poolDataにもStorageの指定をする

こんな感じですね。これで完璧。

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

Cognitoはドキュメントが恐ろしく少ないですね。

この記事が誰かのためになれば幸いです。

ではまた!

【Angular】CognitoのsessionStorageがうまく使えない問題!
フォローしてもらえると泣いて喜びます