Results 1 to 2 of 2

Thread: Best approach for Login/Logout mechanism using the Router in ExtJS 5.1.x

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2014

    Question Best approach for Login/Logout mechanism using the Router in ExtJS 5.1.x

    Hi! I am developing a small ERP-like business application. It is basically a Shell which dynamically load modules developed (in-house) in other frameworks, even other technologies, using iframes or other mechanisms (see attached picture)

    I am refactoring the Login/Logout mechanism, but I'm a bit confussed since I have seen many examples but none resembles my current situation:


    Backend's API is practically a black box, since I have little chance to make changes there.
    Login/logout mechanism should use the following Ajax calls:
    • /login.asp - Log in the backend
      • Payload: { username: username, password: md5(password) }
      • Returns: { success: true/false }
    • /logout.asp - Log out the backend
      • Returns: { success: true/false }
    • /menu.asp - Get application's modules menu from backend. Fails if not logged in
      • Returns: { success: true/false, data: [ /*menu items if success=true*/ ] }
    * Therefore menu.asp callback should drive client's session accordingly (session timeout or logged out).

    CLIENT (ExtJS 5.1.x)

    I took Kitchensink's example shell and based my application on it, as a skeleton, and also Ticket-app example for its login mechanism, but as I mentioned before it doesn't fit my needs completely and still have issues.

    My app structure is as follows:
    • Application.js
      • ?controller/Global.js - Router (defaultToken: 'home')
      • view/login/Login{Controller}.js - Login view (window)
        • Login handler: /login.php ajax call
      • view/main/Main{Controller}.js - Main view (viewport plugin)
        • Logout handler: /logout.php ajax call
      • store/Navigation.js - Navigation TreeStore menu
        • Load store: /menu.asp
      • view/ContentPanel.js - Placeholder for modules

    I have tried many approaches, some are working but not in an entirely clean and elegant way, therefore I would like to know which would be the most appropriate way to use the Router in conjunction with Login/Logout, MainView and Navigation menu.

    PS. Would it possible to also use a Session (Cookie or localStorage) or which is the best, cleaner approach?

    Thank you and kind regards!
    Attached Images Attached Images

  2. #2
    Sencha Premium User
    Join Date
    Nov 2014


    Here's an approach I've used before.

    In a controller dedicated to handling the login/logout views and their interactions with your login/logout API, add an application level listener for events relevant to a user's session in your app (showlogin, showlogout, showerror). Also, create a utility class that contains the methods to check the validity of a user's session, begin a new session, end a session, or warn about problems with the session.

    In controllers dedicated to other modules or views in your application, setup your routes config to specify before and action configs (see In the before handler, you can make a call to your utility method to validate the user's session, and if the validation passes, resume the route action. If the validation fails, stop the action, fire off the appropriate application level event that will be handled by your login/logout controller to show the error, show the login, or whatever other action is needed.

    Regarding the use of cookies/local storage, you'll never want to store the user's password there, but you could store a server-generated session token. You could then resume the session automatically by passing the stored username and session token to the server (where it validates that the token has not expired, matches up to the username for which it was originally generated, etc.).

    Hopefully this gives you some ideas. There are certainly many valid approaches to this scenario.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts