Wie handhaben die Staaten, wenn Sie eingeloggt (Ionisch, FB, AngularJS)?

Baue ich eine app in der Ionischen und haben angefangen zu Graben, in die Feuerstellung-Authentifizierung-Methode. So weit ich es geschafft habe, um das setup eine Anmeldung über Twitter richtig (ich kann login und logout).

Jedoch, wie ich die Zustände der ionic-framework, so dass nur bestimmte Mitgliedstaaten (und damit Seiten) angezeigt, wenn Sie Angemeldet sind, und andere, wenn Sie abgemeldet sind? Den code habe ich so weit unten gezeigt wird.

Idealerweise würde ich so etwas wie eine variable:

AuthRequired: true

Wie machst du das, und was heißt es?

app.js

   //Ionic Starter App

//angular.module is a global place for creating, registering and retrieving Angular modules
//'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
//the 2nd parameter is an array of 'requires'
//'starter.services' is found in services.js
//'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'ngCordova', 'firebase', 'firebase.utils', 'starter.controllers', 'starter.services', 'starter.config', 'starter.auth'])

.run(function($ionicPlatform, Auth, $rootScope) {


  $ionicPlatform.ready(function() {
    //Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    //for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      //org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });



  //stateChange event
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if (toState.authRequired && !Auth.isAuthenticated()){ //Assuming the AuthService holds authentication logic
        //User isn’t authenticated
        $state.transitionTo("login");
        event.preventDefault(); 
      }
  });





})

.config(function($stateProvider, $urlRouterProvider) {

  //Ionic uses AngularUI Router which uses the concept of states
  //Learn more here: https://github.com/angular-ui/ui-router
  //Set up the various states which the app can be in.
  //Each state's controller can be found in controllers.js
  $stateProvider

  //setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  //Each tab has its own nav history stack:

  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl',
        authRequired: true
      },
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl',
           authRequired: true
        }
      }
    })
    .state('tab.chat-detail', {
      url: '/chats/:chatId',
      views: {
        'tab-chats': {
          templateUrl: 'templates/chat-detail.html',
          controller: 'ChatDetailCtrl',
           authRequired: true
        }
      }
    })

  .state('tab.friends', {
      url: '/friends',
      views: {
        'tab-friends': {
          templateUrl: 'templates/tab-friends.html',
          controller: 'FriendsCtrl',
           authRequired: true
        }
      }
    })
    .state('tab.friend-detail', {
      url: '/friend/:friendId',
      views: {
        'tab-friends': {
          templateUrl: 'templates/friend-detail.html',
          controller: 'FriendDetailCtrl',
           authRequired: true
        }
      }
    })

  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl',
           authRequired: true
      }
    }
  })

  .state('tab.example', {
    url: '/example',
    views: {
      'tab-example': {
        templateUrl: 'templates/tab-example.html',
        controller: 'ExampleCtrl',
           authRequired: true
      }
    }
  })


  .state('tab.overview', {
    url: '/overview',
    views: {
      'tab-overview': {
        templateUrl: 'templates/tab-overview.html',
        controller: 'OverviewCtrl',
           authRequired: true
      }
    }
  })

  .state('tab.login', {
    url: '/login',
    views: {
      'tab-login': {
        templateUrl: 'templates/tab-login.html',
        controller: 'LoginCtrl',
           authRequired: true
      }
    }
  });

  //if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');

})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" >
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <!-- firebase and simple login -->
    <script src="https://cdn.firebase.com/libs/angularfire/0.9.1/angularfire.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>


    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>



  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).


    -->

    <ion-nav-view animation="slide-left-right"></ion-nav-view>



  </body>
</html>

Verwenden Sie die Benutzeroberfläche des Routers oder des offiziellen ngRouter? Für mich, ich benutze die ui-router und in jedem Zustand, ich bin in der Lage, zum speichern von benutzerdefinierten Daten wie ein boolean mit dem Namen "public", die entscheidet, ob der entsprechende Staat benötigt Authentifizierung oder nicht. Ich kann Ihnen weitere detaillierte Informationen, wenn Sie wollen, so etwas wie, dass.
Hi Himmet. Um ehrlich zu sein weiß ich nicht, ich denke, die standard kommt mit dem Ionic Framework. Ja, bitte teilen Sie Ihre Methoden!
Ich bin in der Lage, die akzeptierten Antworten zu arbeiten. Ein Unterschied in meinem code ist, dass ich die 'authRequired' als eine Eigenschaft des Staates und nicht verschachtelt in dem Zustand den Blick. Sonst sah es mir zu, Sie würde ändern müssen die " toState.authRequire " um zu sehen, im inneren des toState.anzeigen
Können Sie zeigen Sie Ihren code in eine seperate Antwort? Dank
angularFire-Samen und generator-angularfire verwenden Sie ähnliche Muster, indem ein decorator auf den $routeProvider-service zu erstellen authentifiziert Routen. Die Anpassung an ui-router ist eine 30-minütige übung.

InformationsquelleAutor AMG | 2015-01-12

15

Sind Sie fast da. Alles, was Sie brauchen, ist, um sicherzustellen, dass Ihre Staaten gekennzeichnet sind, angemessen mit der benutzerdefinierten Eigenschaft 'AuthRequired' und listen für $stateChangeStart Ereignis für die Authentifizierung überprüfen. Dieses Ereignis wird ausgelöst, jedes mal, die Sie bewegen, mit in die Anwendung.
```
.run(function($ionicPlatform, AuthService) {
      //ionic init code    

      //stateChange event
      $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if (toState.authRequired && !AuthService.isAuthenticated()){ //Assuming the AuthService holds authentication logic
        //User isn’t authenticated
        $state.transitionTo("login");
        event.preventDefault(); 
      }
    });
}

.state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl',
        authRequired: true
      }
    }
  })

  .state('tab.chats', {
      url: '/chats',
      views: {
        'tab-chats': {
          templateUrl: 'templates/tab-chats.html',
          controller: 'ChatsCtrl',
          authRequired: true
        }
      }
    })
```
Den besten Platz für $stateChangeStart event-handler wäre die app läuft.
- Danke für die Antwort. Ich bekomme es nicht genau, wo und wie man die stateChangeStart?
- stateChange-Ereignis-handler muss in der run-Funktion, wo Sie initialisieren den Ionischen. run-Funktion ist die am nächsten zur main-Methode in eckige, die ausgeführt werden, wenn die app geladen ist. Ich aktualisierte den code für Sie
- Vielen Dank für das update. Es scheint nicht zu funktionieren für mich, da ich meine Staaten in der .config. Die AuthService ist Auth?
- Im Grunde genommen, jetzt ist die app immer noch läuft und alles, aber ich kann noch gehen Sie zur Seite Strich, auch wenn Sie abgemeldet sind... habe ich aktualisiert meine Frage mit meinem aktuellen code.
- Hallo. Wie sieht Ihr Dienst Aussehen? die isAuthenticated()?
- Entschuldigung für die Verzögerung. Die Annahme, mit isAuthenticated () - Methode war, dass es hält alle auth-Logik und lassen Sie uns wissen, ob der Benutzer authentifiziert ist oder nicht. In Ihrem Fall haben Sie die FB-auth implementiert durch die AuthService und legen Sie eine Methode, um zu verfolgen, ob der Benutzer authentifiziert ist.
- Dies ist eine gute Lösung. Es gibt eine Arbeitsgruppe mit der Umsetzung dieser Strategie, mit Winkel + FB, in der angularFire-Samen Projekt.
- Vereinbart, aber es wird nicht synchronisiert mit dem Ionic-Framework, da es problematisch wird. Haben Sie andere snippets?
- Habe ich noch nicht herausgefunden. Könnten Sie mir das vollständige Beispiel?
- Es ist eine großartige Lösung, löst den Zweck. Weiß nicht, warum es nicht die akzeptierte Antwort. Sieht aus wie OP erwartet jemand code für ihn.
- Ich habe versucht, dies umzusetzen, wie Karthik geschrieben hat und immer haben toState.authRequired undefined... ich habe versucht, es zu überprüfen, wie dieses: $rootScope.$auf("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){ console.log('toState:' + toState.authRequired); });
InformationsquelleAutor Karthik

Ich hatte das gleiche problem, dass bei Ihnen! Schauen Sie, wie ich es gelöst!

app.js

angular.module('app', ['ionic','firebase', 'app.controllers', 'app.routes', 'app.directives','app.services','app.filters',])

.run(function($ionicPlatform, $rootScope, $state) {
  $ionicPlatform.ready(function() {
    //Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    //for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {//
      //org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });

  //stateChange event
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
    var user = firebase.auth().currentUser;
    if (toState.authRequired && !user){ //Assuming the AuthService holds authentication logic
      //User isn’t authenticated
      $state.transitionTo("login");
      event.preventDefault(); 
    }
  });
  //Initialize Firebase Here

})

routes.js

angular.module('app.routes', ['ionicUIRouter'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider  

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

 .state('menu', {
    url: '/menu',
    templateUrl: 'templates/menu.html',
    abstract:true,
    controller: 'menuCtrl'
  })

  .state('menu.dash', {
    url: '/contas',
    templateUrl: 'templates/dash.html',
    controller: 'contasCtrl',
    authRequired: true
  })

$urlRouterProvider.otherwise('/login')

});

InformationsquelleAutor bandojulio

0

Erfolgreich zu sein Lesen Sie den Wert mit:
```
toState.authRequired
```
Bitte verschieben authRequired: true innerhalb von .state statt views.

InformationsquelleAutor Joseph Law

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.