認証されたユーザーだけに許可したいアクションがあります。まだログインしていないユーザーがこのリンクをクリックすると、Web サーバーはログインしていないという応答を返します。次に、フローティング「ライトボックス」div にログイン フォームを表示します。ユーザーが正常にログインした場合、ブラウザでアクションを再試行します。
再試行したい関数を保存する適切な場所を見つけるのに苦労しています。現在、私はそれをグローバルオブジェクトにアタッチしていますが、これは非常にハックなようです。jQuery の「遅延」パターンはここに当てはまるようですが、遅延オブジェクトへの参照をどこかに保持する必要があり、それを行う適切な場所がわかりません。
提案?
簡単なコードを次に示します (実際には、ログイン フォームを表示するか、アクションの確認を表示するかは、Ajax 応答によって決まります)。
$(function() {
$('li.secured').find('a').click(function() {
var link = this;
var action = function() { // captures 'link'
if(RootObj.IsAuthenticated() ) { // already logged in
window.location.assign( link.href );
} else {
// pass ourself in as a callback to be repeated after authentication
// Yes, this seems to work even in the midst of our own definition...
RootObj.ShowLoginForm( action );
}
return false; // don't go immediately to the new url
}
return action();
});
});
RootObj.ShowLoginForm = function( callback ) {
var lb = $('#lightbox');
if(lb.length == 0) { lb = $('<div id="lightbox" class="lightbox"></div>').appendTo('body'); }
lb.load('login.html');
RootObj.callback = callback; // is there a better place to store this callback function?
}