在loginin extjs 4 mvc之后加载新视图 [英] load new view after the loginin extjs 4 mvc
问题描述
我有一个在extjs 4中创建的登录视图，数据从mysql中获取。
我的问题是，我无法在sucessfull登录后重定向我的页面。
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.
我要重定向的代码是。
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);
}
}
推荐答案
有两种方法来处理这个问题：
There are two ways to approach this:
这是推荐的方式，更快更安全。
This is the recommended way, for being faster and more secure.
- 有一个index.php页面，用于检查用户是否登录。
- 如果用户登录，您应该只需要实际的系统索引文件，其中包括ExtJs标头。
- 如果用户没有登录，您应该需要一个login.php文件，显示实际的登录屏幕。这个页面可能会加载ExtJs库（因为在这个页面上只有很少的内容），我认为你不需要ExtJs文件。
所以例如，这是我的index.php：
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');
}
?>
然后 app / index.php 是实际的索引文件加载您的应用程序脚本和ExtJs lib。
Then app/index.php is the actual index file that loads your app scripts and ExtJs lib.
login.php 只是一个相当简单的登录表单：
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>
从ExtJs应用内登录
这种方法不是强烈推荐的，因为您需要在用户甚至认证之前加载整个ExtJs框架和非常可能的应用程序脚本。
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.
app.js可能包含以下代码： p>
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'
}]
}
]
});
},
然后你可以做：
var iContentPanel = this.getContentPanel();
iContentPanel.getLayout().setActiveItem( iPage );
其中 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.
这篇关于在loginin extjs 4 mvc之后加载新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
