Question

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

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

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

MVC查看代码段（Views / Home / 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>
....

我已经完成了root重定向，登录后，如果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.loginUser函数基本上只是一个ajax调用，它将凭据传递给帐户控制器并返回成功或失败。成功后，您可以看到为window.location ='/'触发了回调，它执行完全重新加载。失败时只需显示警报或其他内容。

使用Angular登录后刷新MVC视图

1 个答案: