0

私のionicアプリケーションにfirebaseを使用してログイン/認証ページを実装しようとしていますが、問題が発生しています。

私は自分のアプリのメイン部分でタブを使用しますが、ログインページ(タブ表示を隠す)にユーザーをリダイレクトしようとすると、状態とURLが正しく指示されているにもかかわらずログインページは空白として表示されます。私は私の状態とタブを宣言するのはここです:

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

    // setup an abstract state for the auth section 
    .state('auth', { 
    url: '/auth', 
    abstract: true, 
    }) 

    .state('auth.login', { 
    url: '/login', 
    views: { 
     'main-view1': { 
     templateUrl: 'templates/auth/login.html', 
     controller: 'LogInCtrl' 
     } 
    }, 
    data: { 
     authenticate: false 
    } 
    }) 

    .state('auth.signup', { 
    url: '/signup', 
    views: { 
     'main-view2': { 
     templateUrl: 'templates/auth/signup.html', 
     controller: 'SignUpCtrl' 
     } 
    }, 
    data: { 
     authenticate: false 
    } 
    }) 

    // 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.home', { 
    url: '/home', 
    views: { 
     'tab-home': { 
     templateUrl: 'templates/tab-home.html', 
     controller: 'homeCtrl' 
     } 
    }, 
    data: { 
     authenticate: true 
    } 
    }); 
}); 

私のリダイレクトは、実行関数内で、ここで行われます。

.run(function($ionicPlatform, $rootScope, $state, AuthService) { 
    $ionicPlatform.ready(function(){ 
    AuthService.userIsLoggedIn().then(function(response) 
    { 
     if(response === true) 
     { 
     $state.go('tab.home'); 
     } 
     else 
     { 
     $state.go('auth.login'); 
     } 
    }); 

    // 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); 
     cordova.plugins.Keyboard.disableScroll(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleDefault(); 
    } 
    }); 

    // UI Router Authentication Check 
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){ 
    if (toState.data.authenticate) 
    { 
     AuthService.userIsLoggedIn().then(function(response) 
     { 
     if(response === false) 
     { 
      event.preventDefault(); 
      $state.go('auth.login'); 
     } 
     }); 
    } 
    }); 
}) 

最後に、私のテンプレート/認証/ login.htmlとファイルは次のようになります。

<ion-view> 
    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Log In</h1> 
    </ion-header-bar> 
    <ion-content class="padding"> 
    <button class="button button-block button-positive" ng-click="facebookLogin()">Login with Facebook</button> 
    <div class="row"> 
     <div class="col col-center"> 
     <h4 class="text-center">OR</h4> 
     </div> 
    </div> 
    <form name="login_form" class="form-container" novalidate> 
     <div class="list list-inset"> 
     <label class="item item-input"> 
      <input type="email" placeholder="Email" ng-model="user.email" required> 
     </label> 
     <label class="item item-input"> 
      <input type="password" placeholder="Password" ng-model="user.password" required> 
     </label> 
     </div> 
     <button class="button button-block button-balanced" ng-click="login(user)" ng-disabled="login_form.$invalid">Login</button> 
    </form> 
    <button class="button button-block button-clear button-positive button-small" ui-sref="auth.signup"> 
     Sign Up 
    </button> 
    <div ng-show="errors"> 
     <p class="message error" ng-repeat="error in errors"><b>[{{error.code}}]</b> {{error.msg}}</p> 
    </div> 
    </ion-content> 
</ion-view> 

ログインページを実装する際に間違っているアイデアはありますか?

答えて

0

私は、ログイン/サインアップセクションでは、ヘラクシーのアプローチにはなりません。認証なしで簡単な状態を作成する必要があります。 (必須ではありません)。それを削除する場合は、ui-viewの参照「main-view1」と「main-view2」を削除する必要があります。これは、ビューがロードされる場所を示し、親のテンプレート内で宣言される必要があるためです。

また、著者の親ビューを保持したい場合は、抽象的な状態のテンプレートを作成し、ui-view属性でdivを宣言し、 "main-view"のような名前を付け、 auth.loginとauth.signupの両方のui-viewリファレンスを「main-view」に変更します。

関連する問題