使用Angular登录后刷新MVC视图

Question

使用此处的Breeze Angular SPA模板，http://www.breezejs.com/samples/breezeangular-template，我正在尝试更新一个在用户身份验证后更改的菜单。

我的示例与默认模板略有不同，因为我将Login和Register视图移到了模式窗口中。当模式在成功登录后关闭时，MVC视图（而不是角度视图）中的菜单不会更新，因为不会发生完整的页面刷新。

在SPA模板中，在进入SPA之前需要进行身份验证，然后进行硬重定向/刷新并加载SPA。在我的情况下，您可以在进行身份验证之前浏览SPA中的视图/页面。

MVC视图代码段（Views/Home/Index.cs.html）

...
<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将处理路由，因此不会发生硬刷新，因此菜单不会更新。

Ajax登录代码段（App/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（Durandal，但应具有适应性）

    //#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.logingUser函数基本上只是一个ajax调用，它将凭据传递给帐户控制器并返回成功或失败。成功后，您可以看到window.location='/'的回调被触发，它会进行完全重新加载。一旦失败，只需发出警报或其他什么。