Ext JS is frequently used to build internal web-based platforms, and those sites typically have logins to only allow certain users to access them. We're going to take a quick look at how to detect and handle user logouts while using Ext JS with PHP sessions.
Since the main purpose of using Ext JS is to build a "one-page" site there is the need to detect whether or not a user is still logged in when performing Ajax (or other proxy) calls. This can be necessary for several reasons, such as automatic logouts due to inactivity and the user clearing browser information.
Let's say we have an ExtJS application that uses PHP sessions to validate users and log them in. There would be a bit of PHP code that validates the session (for example, checking if a session variable for UserID exists). On regular webpages validation failure would typically result in a redirect out of the page in question, however when there are instances of Ajax calls to bring data into the ExtJS application then there needs to be additional logic in place.
An easy method of handling this is to use a different validate/redirect function for PHP files returned via Ajax, and instead of redirecting return an error code that ExtJS can handle. Let's assume our PHP script starts with the following bit of code that performs this validation:
// PHP Code
session_start();
if(empty($_SESSION["UserID"])) {
header("HTTP/1.0 403 Forbidden");
exit;
}
// Script, return code continues here
As you can see we are checking for a valid session, and if it does not exist, returning an HTTP error code (in this case, 403). No additional output is returned since the PHP script exits. Now let's get something set up in Ext to handle this error code.
It is very simple to have Ext monitor all Ajax requests for specific error codes. Simply add a listener to the global Ajax event and handle the code accordingly. Since we are using error codes, you would listen for the requestexception event as shown here:
// JS Code
Ext.Ajax.on('requestexception', function(connection,response) {
if(response.status == 403) {
// The script found the user is no longer logged in
// Here we would redirect back to the login page
}
});
From here most people could figure out the rest for themselves. Use whatever method you want for redirecting back to the login page, possibly warning the user first and delaying the redirect so the user has time to read the message. A nice way to do this in ExtJS is to use Ext.MessageBox in order to mask everything else, and possibly include a progress timer counting down until the redirect is performed. Below is a quick example.
// JS Code within Ajax listener
// Create the message box, preventing page interaction
var msgBox = Ext.MessageBox.show({
title: 'Session Inactive',
msg: 'Please log in again.',
progressText: 'Exiting in 5...',
progress: true,
closable: false
});
// Run a setInterval via Taskmanager to update progress
Ext.TaskManager.start({
run: function(count) {
if(count == 5) {
window.location = 'http://www.ohmztech.com';
}
msgBox.updateProgress(count/5,'Exiting in '+(5-count)+'...');
},
interval: 1000
});
There are many ways to handle this kind of functionality, however for most simple PHP/ExtJS platforms this is a simple way that is better than having nothing (which would typically result in things just not loading without explanation).
