Обновить изображение MVC после входа в систему с помощью Angular

Question

Работа с шаблоном Breeze Angular SPA, найденным здесь, http://www.breezejs.com/samples/breezeangular-template. Я пытаюсь обновить меню, которое изменяется после аутентификации пользователя.

Мой пример немного отличается от шаблона по умолчанию тем, что я переместил виды входа и регистрации в модальные окна. Когда модальный закрывается после успешного входа в систему, меню, находящееся в представлении 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> 
.... 

Я работаю корневой редирект, после входа в систему, жесткие обновления страницы, если json.redirect установлен в '/' , Однако, если его установить на текущую страницу, то есть «#/about», «Угловая» обрабатывает маршрутизацию, и поэтому не происходит жесткого обновления, поэтому меню не обновляется.

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

Образец TempHire у Breeze имеет действительно хороший способ обработки удостоверений для SPA (по крайней мере, по моему мнению!). Это означает, что это использует Durandal, поэтому вам нужно будет адаптировать его к Angular, но они оба являются каркасами, выполняющими те же основные принципы, так что удачи! -

В основном, действие контроллера имеет аннотацию [Авторизовать] о действии, которое метод подготовки вызывает на сущности -managerprovider. Если возвращается 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 = '/', который выполняет полную перезагрузку. При отказе просто покажите предупреждение или что-то еще.