My Jquery mobile application has a simple login page through which the user will login and will be able to access the rest of the pages.But the problem here is that i am still able to access the rest of pages without logging in.The login session is maintained at client side using cookie as there is no session maintained at the server side.I have a single HTML file in which i have all the required jquery mobile pages.Is there any way that i can restrict the direct access to the internal pages of my application.
<body onload="init()">
<div>
<!-- login page -->
<div data-role="page" id="home" data-theme="wl" style="top: 1px;">
..............
</div><!-- End of login page -->
<!-- forgot page -->
<div data-role="page" id="forgot" data-theme="wl">
.................
</div><!-- End of forgot password page -->
<!-- Search page -->
<div data-role="page" id="search" data-theme="wl">
................
</div><!-- End of search result page -->
<!-- Sendmail page -->
<div data-role="page" id="sendmail" data-theme="wl"></div>
<!-- End of Sendmail page -->
<!--- View Profile Page =-->
<div data-role="page" id="viewProfile" data-theme="wl">
........................
</div><!-- End of View Profile Page -->
</div>
</body>
I found another simple solution.Earlier when I had this question I used to check the cookie session during the onClick event of the button click.But now I have changed it by checking the cookie session during pageshow event described below.