{"id":1339,"date":"2025-10-31T05:23:00","date_gmt":"2025-10-30T20:23:00","guid":{"rendered":"https:\/\/touhyo.com\/blog\/?p=1339"},"modified":"2025-10-31T17:02:40","modified_gmt":"2025-10-31T08:02:40","slug":"ajax-session-verification","status":"publish","type":"post","link":"https:\/\/touhyo.com\/blog\/en\/ajax-session-verification\/","title":{"rendered":"Ajax session verification"},"content":{"rendered":"\n

For a separate project, we implemented a specification that performs asynchronous communication without triggering a browser reload when switching dropdown selections. Since session tokens were being issued, we encountered an issue where session expiration caused the dropdown to become unresponsive during switching.<\/p>\n\n\n\n

The session tags are as follows.<\/p>\n\n\n\n

HTML<\/span>
<<\/span>input<\/span> <\/span>type<\/span>=<\/span>"hidden"<\/span> <\/span>name<\/span>=<\/span>"token"<\/span> <\/span>value<\/span>=<\/span>"<\/span><<\/span>?= htmlspecialchars($_SESSION['token']) ?>"<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
To resolve this, we decided to make the determination at the top level of the system.<\/p>\n\n\n\n
PHP<\/span>
if<\/span> (<\/span>isset<\/span>($_GET[<\/span>'check'<\/span>])) {<\/span><\/span>\n\t<\/span>header<\/span>(<\/span>'Content-Type: application\/json'<\/span>);<\/span><\/span>\n\t$active <\/span>=<\/span> <\/span>isset<\/span>($_SESSION[<\/span>'token'<\/span>]);<\/span><\/span>\n\t<\/span>echo<\/span> <\/span>json_encode<\/span>([<\/span>'active'<\/span> <\/span>=><\/span> $active]);<\/span><\/span>\n\t<\/span>exit<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
And at the very bottom of the HTML, check the session status every 60 seconds.<\/p>\n\n\n\n
JavaScript<\/span>
async<\/span> <\/span>function<\/span> <\/span>checker<\/span>() {<\/span><\/span>\n\t<\/span>const<\/span> res <\/span>=<\/span> <\/span>await<\/span> <\/span>fetch<\/span>(<\/span>'?check=1'<\/span>, { credentials: <\/span>'include'<\/span> });<\/span><\/span>\n\t<\/span>const<\/span> data <\/span>=<\/span> <\/span>await<\/span> res.<\/span>json<\/span>();<\/span><\/span>\n\t<\/span>return<\/span> data.active;<\/span><\/span>\n}<\/span><\/span>\nsetInterval<\/span>(<\/span>async<\/span> () <\/span>=><\/span> {<\/span><\/span>\n\t<\/span>const<\/span> active <\/span>=<\/span> <\/span>await<\/span> <\/span>checker<\/span>();<\/span><\/span>\n\t<\/span>if<\/span> (<\/span>!<\/span>active) {<\/span><\/span>\n\t\tlocation.href <\/span>=<\/span> <\/span>'\/login.php'<\/span>;<\/span><\/span>\n\t}<\/span><\/span>\n}, <\/span>60000<\/span>);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
We recommend implementing it in the best way possible.<\/p>\n","protected":false},"excerpt":{"rendered":"
For a separate project, we implemented a specification that performs asynchronous communication without triggering a browser reload when switching dropdown selections. Since session tokens were being issued, we encountered an issue where session expiration caused the dropdown to become unresponsive during switching. The session tags are as follows. To resolve this, we decided to make […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/touhyo.com\/blog\/?p=1332","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1339","post","type-post","status-publish","format-standard","hentry","category-memo","en-US"],"_links":{"self":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/comments?post=1339"}],"version-history":[{"count":3,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions"}],"predecessor-version":[{"id":1380,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/posts\/1339\/revisions\/1380"}],"wp:attachment":[{"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/media?parent=1339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/categories?post=1339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/touhyo.com\/blog\/wp-json\/wp\/v2\/tags?post=1339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}