gleiche URL ('/') mit verschiedenen Vorlagen basierend auf Login-Status in AngularJS

Question

Ich würde gerne die Best Practice, wie Routing und Vorlagen in AngularJS einrichten, um eine andere Front & Login-Bereich für Besucher anzuzeigen, und Zeigen Sie dann ein Dashboard für angemeldete Benutzer mit derselben Basis-URL ('/').

Die beiden Seiten sind strukturell völlig unterschiedlich und es werden auch unterschiedliche Assets benötigt.

Ist es besser, zwei verschiedene Apps für die beiden Teile der Website einzurichten, aber wie würde ich dann die Sitzung zwischen den beiden verwalten?

Oder ist es besser, ein "leeres" Layout mit nichts zwischen den Body-Tags zu machen und die verschiedenen Templates in diese zu laden, und separate Routing für den Frontteil und den Board-Teil zu machen?

Ich bin auf der Suche nach der Art, wie Facebook-Login gemacht wird. Um in der Stammdomäne nach der Anmeldung zu bleiben.

Ich verbrachte meinen Nachmittag Googeln und Suchen SO, konnte aber keine Anleitungen zu diesem finden. Irgendwelche Ideen, wie Sie diese Art der Trennung in AngularJS normalerweise machen, wären sehr willkommen.

Answer 1

Martin Antwort ist in Ordnung, aber ich würde eher das Problem mit ui-router module lösen:

1. erstellen drei Zustände: root, dashboard und landing.
2. Erfassen Sie URL mit root Status und umleiten auf dashboard oder landing je nach Autorisierungsstatus.
3. dashboard und landing werden controller und templateUrl an einem Ort zusammen mit anderen Anwendungszuständen definiert, was nett ist.

Code-Beispiel:

angular 
    .module("app", ["ui.router"]) 
    .value("user", { 
    name: "Bob", 
    id: 1, 
    loggedIn: true 
    }) 
    .config(function($stateProvider) { 
    $stateProvider 
     .state("root", { 
     url: "", 
     template: "<section ui-view></section>", 
     controller: function($state, user) { 
      if ($state.is("root")) $state.go(user.loggedIn ? "dashboard" : "landing"); 
     } 
     }) 
     .state("landing", { 
     templateUrl: "landing.html", 
     controller: "LandingCtrl" 
     }) 
     .state("dashboard", { 
     templateUrl: "dashboard.html", 
     controller: "DashboardCtrl" 
     }); 
    }) 
    .controller("DashboardCtrl", function($scope, user, $state) { 
    $scope.logout = function() { 
     user.loggedIn = false; 
     $state.go("root"); 
    } 
    }) 
    .controller("LandingCtrl", function($scope, user, $state) { 
    $scope.login = function() { 
     user.loggedIn = true; 
     $state.go("root"); 
    } 
    }) 

Complete example on Plunker.

Answer 2

Sie können die gleiche Mastervorlage verwenden und je nachdem, ob der Benutzer angemeldet ist, verschiedene Teiltabellen verwenden.

<ng-include=" 'views/loggedout.html' " ng-if="!loggedIn"></ng-include> 
<ng-include=" 'views/loggedin.html' " ng-if="loggedIn"></ng-include>