Angolare - stesso Url "/" ma con diversi modelli basati sullo stato di accesso dell'utente

Question

Sto provando ad avere due modelli diversi. Uno che è la pagina di destinazione per gli utenti che hanno effettuato il logout descrivendo l'attività e l'altra pagina del dashboard se un utente ha effettuato il login.

Ho letto su this other stack su come farlo con il router UI. Mi piacerebbe conoscere la pratica migliore per fare qualcosa di simile come questo usando ngRoute?

Il modo in cui è configurato di seguito, è che "/ frontdesk" è il dashboard e "/" è la pagina di destinazione per gli utenti che hanno effettuato la disconnessione. MA! Voglio che l'URL sia lo stesso sia che l'utente sia sul dashboard sia che sia disconnesso e inviato alla pagina di destinazione! Non voglio "/ frontdesk", voglio "/" per IndexController e FrontdeskController.

Ecco il mio routing JS.

(function() { 
     'use strict'; 

    angular 
     .module('resonanceinn.routes') 
     .config(config); 

    config.$inject = ['$routeProvider']; 

    function config($routeProvider) { 
     $routeProvider 
     .when('/', { // This is the landing Page 
      controller: 'IndexController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/layout/index.html' 
     }) 
     .when('/frontdesk', { //This is logged in user that I want to become '/' as well 
      controller: 'FrontdeskController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/frontdesk/frontdesk.html' 
     }) 
     .when('/register', { 
      controller: 'RegisterController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/authentication/register.html' 
     }) 
     .when('/login', { 
      controller: 'LoginController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/authentication/login.html ' 
     }) 
     .when('/:username', { 
      controller: 'ProfileController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/profiles/profile.html' 
     }) 
     .when('/:username/settings', { 
      controller: 'ProfileSettingsController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/profiles/settings.html' 
    }).otherwise('/'); 
    } 
})(); 

Soluzione!

Grazie a tutti per le vostre risposte.

Grazie a @ThibaudL per la soluzione migliore.

Questo è quanto ho finito per farlo:

In Routes.js

.when('/', { 
     controller: 'MainController', 
     controllerAs: 'vm', 
     templateUrl: '/static/javascripts/layout/Main.html' 

main.html

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div> 
<div ng-include="" src="'/static/javascripts/frontdesk/frontdesk.html'" ng-if="!auth"></div> 

MainController.js

(function() { 
    'use strict'; 

    angular 
    .module('resonanceinn.layout.controllers') 
    .controller('StartController', StartController); 

    StartController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication']; 

    function StartController($scope, $route, $routeParams, $location, Authentication) { 

     $scope.auth = Authentication.isAuthenticated(); 
    } 
})(); 

Ora, se l'utente è autenticato, passa semplicemente i modelli alla dashboard degli utenti. Ho aggiunto un nuovo div con ng-controller a ciascun modello in modo che ogni modello abbia i propri controller separati.

Answer 1

Quello che vorrei fare è:

principale.html

<div ng-include="" src="'/static/javascripts/layout/index.html'" ng-if="auth"></div> 

MainController.js

(function() { 
    'use strict'; 

    angular 
    .module('App.layout.controllers') 
    .controller('MainController', MainController); 

    MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication']; 

    function MainController($scope, $route, $routeParams, $location, Authentication) { 

     $scope.auth = Authentication; 
    }); 
    } 
})(); 

Answer 2

Aggiungi un'altra proprietà, come questo isGuest: true

.when('/', { 
     controller: 'IndexController', 
     controllerAs: 'vm', 
     templateUrl: '/static/javascripts/layout/index.html', 
     isGuest: true 
}) 
.... ............... 

e

app.run(function($rootScope, $state, Session) { 
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) { 
    if (toState.isGuest == true && Session.isAuthenticated()) { 
    // User isn’t authenticated 
    // do redirection to guest user 
    event.preventDefault(); 
    } 

    if (toState.authentication == true && !Session.isAuthenticated()) { 
    // do redirection to loggedin user 
    event.preventDefault(); 
    } 
}); 
}); 

È possibile scrivere il proprio servizio di Session,

Session.isAuthenticated() // restituisce true o false, a seconda che all'utente è ospite o il login

Answer 3

ci sono un paio di cose che si possono fare, l'essere più semplice, il controllo per un registrati nello stato all'inizio del vostro FrontdeskController e passare alla home page, se non sei loggato.

è anche possibile aggiungere le variabili sul instradare e controllare per loro come nella risposta precedente.

ci sono altri casi estremi che puoi fare, e trovo che sia una pessima pratica, come scrivere una pagina modello a doppio stato, ma ancora una volta, non è una buona cosa da fare.

Spero che questo ha aiutato

Answer 4

È possibile utilizzare resolve per verificare se l'utente è connesso.

$routeProvider 
    .when('/somepage' ,{ 
    templateUrl: "templates/template.html", 
    resolve:{ 
     "check":function($location){ 
      if('Your Condition'){ 
       //Do something 
      }else{ 
       $location.path('/'); //redirect user to home. 
       alert("You don't have access here"); 
      } 
     } 
    } 
    }) 

Answer 5

Per TemplateURL, è possibile utilizzare una funzione come,

templateUrl : function(parameter) { 
    if(loggedin) { 
     return '/static/javascripts/layout/index.html'; 
    } else { 
     return 'logged out page'; 
    } 
} 

È può leggere $routeProvider,

templateUrl - {string = | function() =} - percorso o funzione che restituisce un percorso a un modello html che dovrebbe essere utilizzato da ngView.

Se TemplateURL è una funzione, verrà chiamata con i seguenti parametri:

{Array. parametri del percorso estratti dal $ location.path corrente() applicando il percorso corrente

Answer 6

Iniettare $ locationProvider con il tuo $ routeProvider

config.$inject = ['$locationProvider']; 

poi

function config($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/', { 
     controller: 'IndexController', 
     controllerAs: 'vm', 
     template: " " 
    }) 

- < Oggetto>} ...

nota il suo modello non templateUrl, anche il modello è "" nota solo ""

poi nel controller indice

.controller('IndexController', function($scope, $route, $routeParams, $location) { 
if ($scope.user.loggedIn) $location.path('/:user'); else $location.path('/:visitor');}) 

nota che lo stesso percorso come '/' ma /: utente per gli utenti loggedin e /: visitatori per anonima

Answer 7

Ecco una soluzione completa:

var app = angular.module('app', ['ngRoute']); 

app.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      controller: 'IndexController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/layout/index.html' 
     }) 
     .when('/frontdesk', { 
      controller: 'FrontdeskController', 
      controllerAs: 'vm', 
      templateUrl: '/static/javascripts/frontdesk/frontdesk.html', 
      requireLogin: true 
     }); 
}); 

app.factory('authService', function() { 
    var service = { 
     isAuthenticated: false, 
     loginPageUrl: '/login' 
    }; 

    return service; 
}); 

app.run(function ($rootScope, $location, authService) { 
    $rootScope.$on('$routeChangeStart', function (event, next) { 
     if (angular.isDefined(next) && next !== null && angular.isDefined(next.requireLogin)) { 
      if (next.requireLogin === true && !authService.isAuthenticated) { 
       event.preventDefault(); 
       $location.path(authService.loginPageUrl); 
      } 
     } 
    }); 
}); 

Answer 8

primo tentativo

.

In Routes.js

.when('/', { 
     controller: 'MainController', 
     controllerAs: 'vm', 
     templateUrl: '/static/javascripts/layout/Main.html' 

main.html

<div ng-include="mainTemplate"></div> 

MainController.js

(function() { 
    'use strict'; 

    angular 
    .module('App.layout.controllers') 
    .controller('MainController', MainController); 

    MainController.$inject = ['$scope', '$route', '$routeParams', '$location', 'Authentication']; 

    function MainController($scope, $route, $routeParams, $location, Authentication) { 

     $scope.$watch(function($scope) { 
      return $scope.mainTemplate = Authentication.isAuthenticated() ? '/static/javascripts/layout/index.html' : '/static/javascripts/frontdesk/frontdesk.html'; 
    }); 
    } 
})(); 

Così ora se t L'utente è autenticato, passa semplicemente i modelli alla dashboard degli utenti. Ho aggiunto un nuovo div con ng-controller a ciascun modello in modo che ogni modello abbia i propri controller separati.