これにアプローチするには、次の 2 つの方法があります。
別ページでログイン
これは、より高速で安全な方法として推奨される方法です。
- ユーザーがログインしているかどうかを確認する index.php ページを作成します。
- ユーザーがログインしている場合は、ExtJs ヘッダーを含む実際のシステム インデックス ファイルを要求するだけです。
- ユーザーがログインしていない場合は、実際のログイン画面を表示する login.php ファイルが必要です。このページは、ExtJs ライブラリをロードする場合とロードしない場合があります (このページにはほとんど含まれていないため、ここでは ExtJs ファイルは必要ないと思います)。
たとえば、これは私の 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 ライブラリをロードする実際のインデックス ファイルです。
login.php
かなり単純なログインフォームです:
<?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 フレームワーク全体と、おそらくアプリケーション スクリプトをロードする必要があるため、この方法はあまりお勧めしません。
可能な実装には、ログイン ページまたは実際のアプリケーション ページのいずれかである、一度に 1 つのパネルのみを表示するコンテナー パネルが含まれます。
app.js には、次のコードが含まれる場合があります。
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
表示したいページ (パネル) はどこにありますか。
たとえば、コントローラを動的にロードするなど、これがどのように機能するかを改善する方法は明らかにあります。しかし、それは私が信じている別の質問の話です。
とにかく、最初の方法を検討することを強くお勧めします。