使用Angular登錄後刷新MVC視圖

Question

使用此處發現的Breeze Angular SPA模板http://www.breezejs.com/samples/breezeangular-template，我試圖更新用戶認證後更改的菜單。

我的示例與默認模板略有不同，因爲我已將「登錄」和「註冊」視圖移至模態窗口中。當模式在成功登錄後關閉時，MVC視圖（而不是角視圖）中的菜單不會更新，因爲不會發生完整的頁面刷新。

在SPA模板中，在進入SPA之前需要驗證，然後發生硬重定向/刷新並加載SPA。就我而言，您可以在進行身份驗證之前瀏覽SPA中的視圖/頁面。

MVC視圖代碼段（查看/主頁/ Index.cshtml）

... 
<li> 
@if (@User.Identity.IsAuthenticated) 
{ 
    User Logged In: @User.Identity.Name 
}  
else 
{ 
    User Logged In: Annon 
} 
</li></ul> 

<div ng-app="app"> 
    <div ng-view></div> 
</div> 
.... 

我有工作的根本重定向，登錄後，頁面刷新硬如果json.redirect設置爲 '/' 。但是，如果它設置爲當前頁面，即'＃/ about'，Angular將處理路由並因此不會發生硬刷新，因此菜單不會更新。

阿賈克斯登錄代碼段（應用/ ajaxlogin.js）

... part of login/register function 
if (json.success) { 
    window.location = json.redirect || location.href; 
} else if (json.errors) { 
    displayErrors($form, json.errors); 
} 
... 

這可能使用我的當前設置呢？或者，我是否需要將菜單移到SPA內的某個位置，然後使用Angular確定要顯示的菜單？如果後者，在如何最好地做到這一點方向？我對Angular和Breeze都很陌生。

Answer 1

Breeze中的TempHire示例有一個很好的方式來處理SPA的認證（至少在我看來！）當然這是使用Durandal，因此您需要將它適配到Angular，但它們都是框架執行相同的基本原則好運！ -

基本上，Controller操作對prepare方法在entitymanagerprovider上調用的操作有一個批註[Authorize]。如果返回401（未授權），則SPA採用bootPublic路徑並僅向用戶公開登錄路由。如果登錄成功，登錄方法告訴窗口重裝所有的東西，此時的授權通過，並bootPrivate方法被稱爲 -

shell.js（迪朗達爾，但應該適應）

//#region Internal Methods 
    function activate() { 
     return entitymanagerprovider 
      .prepare() 
      .then(bootPrivate) 
      .fail(function (e) { 
       if (e.status === 401) { 
        return bootPublic(); 
       } else { 
        shell.handleError(e); 
        return false; 
       } 
      }); 
    } 

    function bootPrivate() { 
     router.mapNav('home'); 
     router.mapNav('resourcemgt', 'viewmodels/resourcemgt', 'Resource Management'); 
     //router.mapRoute('resourcemgt/:id', 'viewmodels/resourcemgt', 'Resource Management', false); 
     log('TempHire Loaded!', null, true); 
     return router.activate('home'); 
    } 

    function bootPublic() { 
     router.mapNav('login'); 
     return router.activate('login'); 
    } 

login.js -

function loginUser() { 
     if (!self.isValid()) return Q.resolve(false); 

     return account.loginUser(self.username(), self.password()) 
      .then(function() { 
       window.location = '/'; 
       return true; 
      }) 
      .fail(self.handleError); 
    } 

的account.loginUser功能基本上只是通過憑據帳戶控制和返回成功或失敗的Ajax調用。在成功的時候，你可以看到這個回調被觸發，因爲window.location ='/'會完成一個完整的重載。失敗時只需顯示警報或其他內容。