Javascript 使用firebase登录或注销时如何更改状态而不刷新？_Javascript_Angularjs_Firebase_Ionic Framework

Javascript 使用firebase登录或注销时如何更改状态而不刷新？

javascript angularjs firebase ionic-framework

Javascript 使用firebase登录或注销时如何更改状态而不刷新？,javascript,angularjs,firebase,ionic-framework,Javascript,Angularjs,Firebase,Ionic Framework,我正在尝试使用resolve检查身份验证状态，并将用户引导到适当的视图我正在尝试以下操作（请参见下文），但这不会导致像刷新页面时那样转移到适当的状态 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 exam

我正在尝试使用resolve检查身份验证状态，并将用户引导到适当的视图

我正在尝试以下操作（请参见下文），但这不会导致像刷新页面时那样转移到适当的状态

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.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'firebase'])

.run(function($ionicPlatform) {
  $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();
    }
  });
})

.run(["$rootScope", "$state", function($rootScope, $state) {
  $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
    // We can catch the error thrown when the $requireAuth promise is rejected
    // and redirect the user back to the home page
    if (error === "AUTH_REQUIRED") {
      console.log('stateChangeError')
      $state.go("app.login");
    }
  });
}])

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

  var authResolve = {
    authReturn: function($state, $q, $timeout, Auth) {
      var defer = $q.defer();
      var ref = Auth.refObj();


      ref.onAuth(authDataCallback)


      function authDataCallback(authData) {
        if (authData) {
          console.log("authDataCallback: User " + authData.uid + " is logged in with " + authData.provider);
          defer.resolve(authData)
        }   else {
          console.log("authDataCallback: User is logged out");
          defer.reject('AUTH_REQUIRED')
        }
      }




      $timeout(function() { // See: http://stackoverflow.com/q/24945731/247243
          defer.reject('login');
      }, 250);

      return defer.promise;
    }
  };


  $stateProvider

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

  .state('app.login', {
    url: "/login",
    views: {
      'menuContent': {
        templateUrl: "templates/login.html",
        controller: "LoginCtrl"
      }
    }
  })

  .state('app.profile', {
    url: "/profile",
    views: {
      'menuContent': {
        templateUrl: "templates/profile.html",
        resolve: authResolve
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/login'); //CHANGE TO HOME
});

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {

})

.controller('LoginCtrl', function($scope, $timeout, $state, Auth) {

  var ref = Auth.refObj();
  var authData = ref.getAuth();

if (authData) {
  console.log("User " + authData.uid + " is logged in with " + authData.provider);
  $scope.authData = authData;
} else {
  console.log("User is logged out");
}

  $scope.signOut = function() {
    Auth.signOut();
  }

  $scope.signIn = function() {
    Auth.signIn();
  }

})


.factory('Auth', function($firebase, $firebaseAuth, $state) {

  // Register the callback to be fired every time auth state changes
  var ref = new Firebase("https://lovin.firebaseio.com");

  var signIn = function() {
    ref.authWithPassword({
        email    : 'sa.ibisevic@gmail.com',
        password : 'Maserati2014'
    }, authHandler);

    // logging users in
    function authHandler(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
        $state.go("app.login")
      } else {
        console.log("Authenticated successfully with payload:", authData);
        $state.go("app.profile")
      }
    }

  }

  var signOut = function() {
    ref.unauth();
    $state.go("app.login")
  }

  var authRef = function() {
    return $firebaseAuth(ref);
  }



  return {

    signIn: signIn,
    signOut: signOut,
    refObj: function() {
      return ref;
    },
    authRef: authRef

  }


})

login.html

<ion-view view-title="Login">


  <ion-nav-bar class="bar-stable">

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>

  <ion-content>
    <h1>{{authData.uid}}</h1>

    <button class="button" ng-click="signIn()">Sign In</button>
    <button class="button" ng-click="signOut()">Sign Out</button>

  </ion-content>
</ion-view>


{{authData.uid}
登录
退出

注意，您可以监听$firebaseSimpleLogin对象上的身份验证状态。所以你可以这样做：

 $rootScope.$on('$firebaseSimpleLogin:logout', function(event) {

    $state.go('login');

  });

希望这能有所帮助。

您反对再次从数据库中查找它吗？如果是性能问题，可以缓存它吗？不超过1。检查用户是否已登录，如果页面需要登录（解析），则在用户注销时重定向到登录状态，然后执行2。相应地更新所有视图。例如，当用户注销时，login.html中的authData.uid应再次变为空。控制台做了预期的事情，但是页面没有“刷新”，我想我需要把$timeout放在某个地方，但是我不知道在哪里，怎么做。另外，$stateChangeError从来没有触发过，这是我本想使用的函数，很好的例子。只有我更喜欢使用新的$firebaseAuth而不是贬值的SimpleLogin。但是谢谢你的帮助。