LoginSignup
1

liff SDKの初期化時に起こったリダイレクトループを解消する

Posted at

はじめに

マウント時に、全てのページにおいて、liff.init()を行なっていました
だが、特定のページへのアクセス時にリダイレクトループが起こっていたので原因を調査しました

環境

liff v2.1
vue3

原因

  • sessionStrageをclearしたことが原因でリダイレクトループが起こっていた
liff.js
liff.init({ liffId: liffId })  // liff SDK初期化

liff SDKの初期化時、
・アクセストークン
・クライアントid
などの情報がセッションストレージへ保存されます

sample.js
liff.init({ liffId: liffId })

if(sessionStorage) sessionStorage.clear()

マウント後に、他の実装の関係でセッションクリアを行なっていました

しかし、セッションクリアした時にliff SDKの初期化時に保存されたデータも一緒にclearされていました

そのため、liff SDK初期化時にはセッションストレージへ保存さているはずのデータが無いので
再度apiが叩かれることで、ループしていました

1. ページへアクセス
2. liff.init()によって取得したユーザー情報がsession strageへ保存される
3. セッションクリア
4. liff.init()の実行によって2次リダイレクト先へリダイレクト(同一ページ)
5. session strage へユーザー情報がないので、再度、liff.init()が実行される

対応

  • session.clearの条件を修正
sample.js
if(sessionStorage.name) sessionStorage.removeItem('name');

元々、クリア対象だった項目(name)のみ sessionから削除しました

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1