webentwicklung-frage-antwort-db.com.de

UI-Router bedingte UI-Ansichten?

Ich kann keinen vernünftigen Weg finden, der sich nicht wie ein Hack anfühlt, um dieses eher unbedeutende Problem zu lösen.

Ich möchte, dass ein Gast eine Splash-Seite sieht, wenn er auf den Index der Website zugreift, und ein angemeldeter Benutzer, um sein Profil anzuzeigen, wobei jede Seite eine eigene Vorlage und einen eigenen Controller hat. Idealerweise würde es zwei Zustände für eine URL geben , und irgendwie könnte ich den aktiven Status abhängig vom Protokollierungsstatus automatisch ändern. Beide Ansichten haben ihre eigenen verschachtelten Ansichten, so dass ng-include nicht verwendet werden kann (ich gehe davon aus). 

Ich bin ziemlich neu im Winkel- und ui-Router und denke, ich könnte eine einfache Lösung für das Problem übersehen. 

Könnte es mit benannten Ansichten und ng-show gemacht werden?

37
Ryan Connolly

Wenn Sie den UI-Router verwenden, erstellen Sie einfach drei Zustände: den Stammzustand mit der '/'-URL und zwei direkte Nachkommenstaaten ohne URLs. In der onEnter des Root-Status erkennen Sie den Status des Benutzers und wechseln entsprechend in den richtigen untergeordneten Status. Dies hat den Anschein, dass für beide untergeordneten Status die gleiche URL beibehalten wird. Sie können jedoch Status mit separaten Konfigurationen trennen.

53
Nate Abele

Die templateUrl kann auch eine Funktion sein, sodass Sie den angemeldeten Status überprüfen und eine andere Ansicht zurückgeben und den Controller in der Ansicht definieren können, anstatt als Teil der Statuskonfiguration

8
Aman Mahajan

Meine Lösung:

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

wo Zustand 1 und Zustand 2 an anderer Stelle definiert sind.

5
Nitin Jadhav

Für Dokumente verwende ich:

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

Die Verwendung von $routeChangeStart hat bei mir nicht funktioniert.

4
abourget

Überall (wahrscheinlich in einem übergeordneten Controller) sollten Sie in der Lage sein, ein '$routeChangeStart' -Ereignis an den $rootScope zu binden, und überprüfen Sie dann Folgendes:

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

Dies wird jedes Mal ausgelöst, wenn eine neue Route festgelegt wird, selbst beim ersten Besuch der Seite.

1
tennisgent

Wenn ich die frage verstehe; Sie möchten sicherstellen, dass der Benutzer, der sich nicht angemeldet hat, keine Seite sehen kann, die eine Anmeldung erfordert. 

Ich habe das mit Code wie folgt in einem Controller gemacht:

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

Es wird für mich bedingte Ansicht in UI-Route verwendet

$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