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

はじめに

マウント時に、全てのページにおいて、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から削除しました