Angular UI Router: Wo sollte ich den Status ändern? Controller? Dienstleistungen? Ereignislistener?

Question

Dies ist eine Frage der Best Practice.

Ich habe eine eckige Anwendung mit einigen geschachtelten Zuständen und Ansichten.

Wenn mein Benutzer die Schaltfläche "Abmelden" drückt, die an eine Controller-Funktion angeschlossen ist, ruft die Controller-Funktion eine Funktion in einem Authentifizierungsdienst auf. Der Authentifizierungsdienst ruft dann den Server an und irgendwo entlang des Benutzers muss der Benutzer zur Anmeldeseite weitergeleitet werden.

Ich hatte ein paar Gedanken mit, wo die tatsächliche "state.go ('Login')" sein sollte.

(1) Der Dienst führt den Anruf zum Server aus, und wenn dieser Anruf beendet wird, ändert der Dienst den Status zur Anmeldung.

Das fühlt sich schlecht an, weil ein Dienst in meinen Augen eine statische Entität sein sollte, die Daten oder Funktionalität bereitstellt und vom Rest der App getrennt ist.

(2) Der Controller ändert den Status zur Anmeldung nach dem Aufruf des Authentifizierungsdienstes.

Das scheint besser. Dem Controller ist die Anwendung und das Markup bereits beigefügt.

(3) Der Dienst gibt eine benutzerdefinierte Aktion aus, die ich in einer App-Konstante wie EVENTS.LOGOUT_SUCCESSFUL definiere, und dann im Stammbereich lausche ich auf dieses Ereignis und führe state.go im Ereignis-Listener aus.

Nicht sicher über dieses, macht es die Dinge komplizierter, aber scheint ziemlich sauber.

Irgendwelche Gedanken?

Answer 1

Ich stimme Ihren Gedanken zu und würde 2 über 3 bevorzugen, wenn dies der einzige Abmeldestrom ist.

Wenn es verschiedene Möglichkeiten gibt, sich abzumelden (z. B. erzwungenes Abmelden), macht Option 3 für mich mehr Sinn.

Answer 2

Change your State in the Controllers. Refer to following example ... 

---------------------------------------------------------------------------- 
# config.js 

(function() { 
    'use strict'; 

    angular 
     .module('app.foo.authentication') 
     .config(moduleConfig); 

    /* @ngInject */ 
    function moduleConfig($translatePartialLoaderProvider, $stateProvider) { 
     $translatePartialLoaderProvider.addPart('app/foo/authentication'); 

     $stateProvider 

     .state('authentication.logout', { 
      url: '/logout', 
      templateUrl: 'app/foo/authentication/logout/logout.tmpl.html', 
      controller: 'LogoutController', 
      controllerAs: 'vm' 
     }); 
    } 
})(); 

    ------------------------------------------------------------------------- 
    # logout.controller.js 

    (function() { 
     'use strict'; 

     angular 
      .module('app.foo.authentication') 
      .controller('LogoutController', LogoutController); 

     /* @ngInject */ 
     function LogoutController(
      $scope, 
      $state, 
      $mdToast, 
      $filter, 
      $http, 
      $window, 
      triSettings, 
      session) { 
      var vm = this; 
      vm.triSettings = triSettings; 
      vm.backToLogin = backToLogin; 
      vm.loading = false; 

      function backToLogin() { 
       vm.loading = true; 
       session.end(); 
       $window.location.reload(); 
       $state.go('authentication.login'); 
      } 
     } 
    })(); 

    ---------------------------------------------------------------------------- 

    # logout.html 

    <div layout="row" flex layout-padding layout-fill layout-align="center center"> 
     <div class="logout-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100"> 
      <md-card> 
       <md-toolbar class="padding-20 logout-card-header"> 
        <div layout="row" layout-align="center center"> 
         <img ng-src="{{::vm.logo}}" alt="{{vm.name}}"> 
        </div> 
        <div layout="row" layout-align="center center"> 
         <h1 class="md-headline" translate>LOGOUT.TITLE</h1> 
        </div> 
       </md-toolbar> 

       <md-content class="md-padding"> 
        <p translate>LOGOUT.MESSAGES.SUCCESS</p> 

        <div layout="row" layout-align="center center"> 
         <md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular> 
        </div> 

        <form name="logout"> 
         <md-button 
          class="md-raised md-primary full-width margin-left-0 margin-right-0 margin-top-10 margin-bottom-10" 
          ng-click="vm.backToLogin()" 
          translate="LOGOUT" 
          aria-label="{{'LOGOUT' | translate}}"> 
         </md-button> 
        </form> 
       </md-content> 
      </md-card> 
     </div> 
    </div>