登录后加载新视图 extjs 4 mvc [英] load new view after the loginin extjs 4 mvc
问题描述
我在 extjs 4 中创建了一个登录视图，数据是从 mysql 中获取的.我的问题是我无法在成功登录后重定向我的页面.
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 库的实际索引文件.
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 可能包含以下代码:
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.
这篇关于登录后加载新视图 extjs 4 mvc的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
