web-dev-qa-db-fra.com

Angular UI Router: Différents états avec la même URL?

La page de destination de mon application comporte deux états: home-public, home-logged-in. Maintenant, je veux afficher les deux états sur la même URL, mais laissez le contrôleur et le modèle dépendre de la session de l'utilisateur (l'utilisateur est-il connecté ou non?).

Y a-t-il un moyen d'y parvenir?

javascriptangularjsangular-ui-router
29
jvannistelrooy

Vous pouvez avoir un état de base qui contrôle quel état charger, et vous pouvez simplement demander à l'enfant d'indiquer que cet état de base n'a pas d'URL:

.state('home', {
  url: "/home",
  templateUrl: "....",
  controller: function($scope,$state,authSvc) {
     if(authSvc.userIsLoggedIn()){
          $state.go('home.loggedin')
     }else{
          $state.go('home.public')
     }
  }
})


.state('home.public', {
  url: "",
  templateUrl: "....",
  controller: function($scope) {
     ...........
  }
})

.state('home.loggedin', {
  url: "",
  templateUrl: "....",
  controller: function($scope) {
     ...........
  }
})

Maintenant, dans le contrôleur de votre état de base (home), vous pouvez vérifier si l'utilisateur est connecté ou non, et utiliser $state.go() pour charger un état approprié.

MODIFIER

Comme promis, un travail de travail .

51
Mohammad Sepahvand

Je ne suis pas sûr que deux États puissent avoir la même url. Ce que je peux penser peut être une option viable serait de définir un seul état

$stateProvider.state('home', {
  templateUrl: function (stateParams){
    // Implement a logic that select what view from the server should be returned for logged in user and otherwise
    //return 'templateurl';
  }
})

Je n'ai pas essayé mais ça devrait marcher.

0
Chandermani