web-dev-qa-db-fra.com

Routeur UI vues conditionnelles de l'interface utilisateur?

Je n'arrive pas à trouver un moyen raisonnable, qui ne ressemble pas à un hack, de résoudre ce problème plutôt trivial.

Je souhaite qu'un invité voie une page de démarrage lorsqu'il accède à l'index du site Web et qu'un utilisateur connecté puisse voir son profil. Chaque page possède son propre modèle et son propre contrôleur. Idéalement, il y aurait deux états pour une URL , et je serais en mesure de modifier automatiquement l’actif en fonction de l’état de la connexion. Ces deux vues auront leurs propres vues imbriquées, donc ng-include ne peut pas être utilisé (je suppose). 

Je suis assez nouveau pour les routeurs angular et ui et pense que je pourrais oublier une solution simple au problème. 

Pourrait-il être fait avec les vues nommées et ng-show?

angularjsangular-uiangular-ui-router
37
Ryan Connolly

Si vous utilisez UI Router, créez simplement trois états: l'état racine, avec l'URL '/' et deux états descendants directs sans URL. Dans l'état onEnter de l'état racine, vous détectez l'état de l'utilisateur et passez en conséquence au bon état enfant. Cela donne l’apparence de conserver la même URL pour les deux états enfants, mais vous permet de séparer des états avec des configurations distinctes.

53
Nate Abele

Le templateUrl peut également être une fonction pour vous permettre de vérifier l'état de connexion, de retourner une vue différente et de définir le contrôleur dans la vue plutôt que dans le cadre de la configuration de l'état

8
Aman Mahajan

Ma solution:

angular.module('myApp')
.config(function ($stateProvider) {
    $stateProvider
        .state('main', {
            url: '/',
            controller: function (Auth, $state) {
                if (someCondition) {
                    $state.go('state1');
                } else {
                    $state.go('state2');
                }
            }
        });
});

où l'état 1 et l'état 2 sont définis ailleurs.

5
Nitin Jadhav

Pour les besoins de la documentation, j'ai utilisé:

$rootScope.$on('$stateChangeStart', function(event, toState) {
  if ((toState.name !== 'login') && (!$localStorage.nickname)) {
    event.preventDefault();
    $state.go('login');
  }
});

Utiliser $routeChangeStart n'a pas fonctionné pour moi.

4
abourget

N'importe où (probablement dans un contrôleur de haut niveau), vous devriez pouvoir lier un événement '$routeChangeStart' au $rootScope et faire votre vérification ensuite:

$rootScope.$on('$routeChangeStart', function(next, current){
    if(next != '/login' && !userLoggedIn){
        $location.path( "/login" );
    }
});

Cela sera déclenché à chaque fois qu'un nouvel itinéraire est défini, même lors de la première visite de la page.

1
tennisgent

Si je comprends la question; vous voulez vous assurer que l'utilisateur qui ne s'est pas connecté ne peut pas voir une page nécessitant une connexion. 

Je l'ai fait avec un code comme celui-ci dans un contrôleur:

if(!'some condition that determines if user has access to a page'){
 $location.path( "/login" );
}
1
JeffryHouser

Il est utilisé pour moi vue conditionnelle dans ui-route 

$stateProvider.state('dashboard.home', {
        url: '/dashboard',
        controller: 'MainCtrl',
       // templateUrl: $rootScope.active_admin_template,
        templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
          var templateUrl ='';
          if ($rootScope.current_user.role == 'MANAGER'){
            templateUrl ='views/manager_portal/dashboard.html';
          }else{
            templateUrl ='views/dashboard/home.html';
          }
          return templateRequest(templateUrl);
        }]
      });
0
Dinesh Vaitage