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


Sto cercando di avere due modelli diversi. Uno che è la pagina di destinazione per gli utenti che hanno effettuato la disconnessione descrivendo l'attività e l'altra pagina del dashboard se un utente ha effettuato l'accesso.

Ho letto questo altro stack su come fare questo con l'interfaccia utente. Mi piacerebbe conoscere la pratica migliore per fare qualcosa di simile come questo usando ngRoute?

Il modo in cui è impostato di seguito è che "/ frontdesk" è il dashboard e "/" è la pagina di destinazione per gli utenti che hanno effettuato il logout.  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 è il modo in cui 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();
  }
})();

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


15
2017-07-08 17:53


origine


risposte:


Quello che vorrei fare è:

main.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; 
   });
  }
})();

3
2017-08-21 14:59



Aggiungi un'altra proprietà, come questa 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();
   }
 });
});

Puoi scrivere il tuo servizio Session,

Session.isAuthenticated() // ritorna true o false, in base al fatto che l'utente sia guest o loggato


8
2017-07-08 18:04



È possibile utilizzare la proprietà resolve per verificare se l'utente ha effettuato l'accesso.

$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");
            }
        }
    }
    })

4
2017-08-19 13:22



Iniettare $ locationProvider con $ routeProvider

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

poi

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

...

nota il suo template not templateUrl, anche il template è "" note just ""

quindi nel tuo controller di indice

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

si noti che stesso percorso di '/' ma /: utente per gli utenti loggati e /: visitatore per anonimo


4
2017-08-20 21:01



ci sono un paio di cose che puoi fare, l'essere più semplice, controllare lo stato di accesso all'inizio del tuo FrontdeskController e andare alla pagina iniziale se non sei loggato.

puoi anche aggiungere variabili sul percorso e controllarle come nella risposta precedente.

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

Spero che questo sia stato d'aiuto


0
2017-08-16 09:45



Per templateUrl, puoi usare una funzione come,

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

Puoi 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à richiamata con i seguenti parametri:

{Array. <Object>} - Parametri del percorso estratti dal corrente $ location.path () applicando il percorso corrente


0
2017-08-20 09:38



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);
            }
        }
    });
});

0
2017-08-20 22:25



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';
   });
  }
})();

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


0
2017-08-21 01:05