问题

I have a login view created in extjs 4 and the data is fetched from mysql. What my issue is that i am not able to redirect my page after the sucessfull login.

My code to redirect is.

onLoginSuccess : function(response, opts) 
                        {
                            //Received response from the server
                            response = Ext.decode(response.responseText);

                            if(response.success)
                                {

                                         var redirect = 'index';        
                                        window.location = redirect; 

                                }
                            else
                                 {
                                    Ext.MessageBox.alert('Login failed', response.message);
                                 } 
                         }

回答1:

There are two ways to approach this:

Login as a separate page

This is the recommended way, for being faster and more secure.

Have an index.php page, that checks whether the user has logged in or not.
If the user is logged in, you should simply require your actual system index file, which includes the ExtJs headers.
If the user is not logged in, you should require a login.php file that shows the actual login screen. This page may, or may not load the ExtJs library (since there's very little on this page, I'd assume you won't need the ExtJs files here).

So for example, this is my index.php:

<?php

require_once('common/include/User.php');

if ( SessionUser()->IsLoggedIn() )
{
    // chdir is simply to keep the correct paths when compiling the app.
    // It works for php, but for html/css links you should use the base tag
    // in your php/html file: <base href="app/"/>
    chdir('app');
    require_once('app/index.php');    
} else {
    require_once('login.php');
}

?>

Then app/index.php is the actual index file that loads your app scripts and ExtJs lib.

login.php is just a rather simple login form:

<?php
// Index file for logged out users (guests)

$iUserName = isset( $_POST['username'] ) ? $_POST['username'] : '';

$iLoginErrorTxt = '';

if ( isset( $_POST['username'] ) )
{
    require_once('common/include/User.php');

    $iLoginError = SessionUser()->Authenticate( $_POST['username'], $_POST['password'] );

    if ( $iLoginError['success'] )
    {
        // Login successful - reload the page.
        header( "Location: " . $_SERVER['PHP_SELF'] );
        exit();
    } else {
        // Login failed - present an error.
        $iLoginErrorTxt = $iLoginError['error'];
    }
}
?>


<html>
<head>
    <title>My System</title>            
</head>

<body>

<form class="login-form" action="<?=$_SERVER['PHP_SELF']?>" enctype="application/x-www-form-urlencoded" method="post">

    <input name="username" size="25" type="text" value="<?=$iUserName?>" value spellcheck="false" placeholder="User Name"/>

    <input name="password" size="25" type="password" value spellcheck="false" placeholder="Password"/>

    <div class="error-message"><?=$iLoginErrorTxt?></div>

    <input name="submit" type="submit" value="Login" />

</form>

</body>
</html>

Login from within the ExtJs app

This method is not highly recommended as you need the load the whole ExtJs framework and very possibly your application scripts, before the user even authenticated.

A possible implementation will involve having a container panel, which only displays a panel at a time, being either the login page, or the actual application page.

The app.js might include this code:

refs:
[{
    ref: 'contentPanel',
    selector: 'viewport > #contentPanel'
}],


controllers: [
    'MainMenu'
],

launch: function() {
    // Enable quicktips
    Ext.QuickTips.init();

    // Create the viewport 
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                xtype: 'panel',
                id: 'contentPanel',
                layout: 'card',

                dockedItems: [{
                    xtype: 'mainmenu',
                    dock: 'top' 
                }]
            }
        ]
    });   
},

Then you can do:

var iContentPanel = this.getContentPanel();
iContentPanel.getLayout().setActiveItem( iPage );

Where iPage is whatever page (panel) you wish to display.

There are obviously ways to improve how this works, for example, by dynamically loading controllers; but that's a story for a different question I believe.

Regardless, I would strongly suggest you consider the first method.

回答2:

You could handle logging in by simply overlaying the whole app with a login window, like here: http://blogapp.banchaproject.org/app.html

The code can be found here, especially the this controller will be of interest for you: https://github.com/Bancha/BanchaBlogApp/blob/master/webroot/app/controller/Authentification.js

来源：https://stackoverflow.com/questions/14810340/load-new-view-after-the-loginin-extjs-4-mvc

标签

extjs

extjs4

extjs-mvc

load new view after the loginin extjs 4 mvc

问题

回答1:

Login as a separate page

Login from within the ExtJs app

回答2: