使用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 ='/'会完成一个完整的重载。失败时只需显示警报或其他内容。