裏側で状態を確認する

別案件でセレクトボックスの切り替え時にブラウザ上でリロードされる動作を再読込みさせずに非同期で通信する仕様へ変更。セキュリティ面からセッショントークンを発行していたのでセッションが切れた際に切り替えが無反応になる現象がありました。

セッション用のタグは下記ですね。

HTML
<input type="hidden" name="token" value="<?= htmlspecialchars($_SESSION['token']) ?>">

解決するために最上部で判定することになりました。

PHP
if (isset($_GET['check'])) {
	header('Content-Type: application/json');
	$active = isset($_SESSION['token']);
	echo json_encode(['active' => $active]);
	exit;
}

そしてhtmlの最下部で60秒ごとに状態をチェック。

JavaScript
async function checker() {
	const res = await fetch('?check=1', { credentials: 'include' });
	const data = await res.json();
	return data.active;
}
setInterval(async () => {
	const active = await checker();
	if (!active) {
		location.href = '/login.php';
	}
}, 60000);

ベストな方法で実装するのがおすすめです。

記事にコメントを残す