0

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

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

在 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>
....

我正在处理根重定向，登录后，如果 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 的新手。

4

1 回答 1

0

Breeze 中的 TempHire 示例有一种非常好的方式来处理 SPA 的身份验证（至少在我看来！）当然这是使用 Durandal，因此您需要将其调整为 Angular，但它们都是执行相同基本原则的框架，所以祝你好运！-

基本上，Controller 操作在 prepare 方法在 entitymanagerprovider 上调用的操作上有一个注释 [Authorize]。如果返回 401（未授权），SPA 将采用 bootPublic 路径，并且仅向用户公开登录路由。登录成功后，login方法告诉窗口重新加载一切，此时授权通过，调用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 = '/' 触发了回调，该回调会执行完全重新加载。失败时只需显示警报或其他内容。

于 2013-08-01T19:22:41.937 回答