javascript - Facebook 登录后 $location.path() 不起作用

Question

我有这个 Controller :

.controller('LoginCtrl', function($scope, $location){
$scope.fbLogin = function() {
openFB.login(
    function(response) {
        if (response.status === 'connected') {
            console.log('Facebook login succeeded');
        } else {
            alert('Facebook login failed');
        }
    },
    {scope: 'email,publish_actions,user_friends'});
};
console.log(openFB.getLoginStatus() == 'connected');
if(openFB.getLoginStatus() == 'connected'){
$location.path("profile").replace();
$location.reload(true);
}
})

成功登录后，我想重定向到个人资料页面，但除非我手动重新加载页面，否则这不起作用。

正确的做法是什么？

Answer 1

因为您使用的是外部库，所以您需要告诉 Angular，该库何时触发您希望应用程序使用react的事件。 Angular 依赖于一个常量“digest loop”——这就是奇迹发生的地方。大多数时候，Angular 会在你不知情的情况下处理事情，这意味着有时很难不错过这样的错误!

好消息是它应该很容易修复，只需将事件触发的代码包装到一个函数中并将其传递给 $scope.$apply():

if(openFB.getLoginStatus() == 'connected'){ 
  $scope.$apply( function() { 
    $location.path("/profile").replace();
  }
}

编辑

看到您的评论后，很明显这不是一个 Angular 问题 - 这是您的逻辑。您想要在 Facebook 登录完成后更改位置，但您没有在回调中运行代码。您需要做的是确保在收到登录响应后更改页面的位置:

.controller('LoginCtrl', function($scope, $location){ 
  $scope.fbLogin = function() { 
    openFB.login( function(response) { 
      if (response.status === 'connected') {
        // This runs on success 
        $scope.$apply( function () { $location.path('profile').replace() } ); 
      } else { 
        alert('Facebook login failed'); 
      } 
    }, {scope: 'email,publish_actions,user_friends'}
    ); 
  }; 

  // This runs when the controller is instatiated, i.e. only once when
  // the page loads. At this point you have no response from FB
  if(openFB.getLoginStatus() == 'connected'){ 
    $location.path("profile").replace();  
  } 
})

请注意，对于页面加载时用户已登录 Facebook 的情况，您仍然需要立即运行的代码(底部部分)。

最后，为了便于讨论，我将向您展示一个不应使用的选项，但了解其他情况很有用:

$scope.$watch( openFB.getLoginStatus , function (value) {
  if (value === "connected") {
    $location.path("profile").replace();
  }
);

上面的作用是监视您传递的第一个函数的结果，然后在第二个参数发生变化时将其作为回调调用。每次 Angular 运行摘要循环时都会发生这种情况，因此只要您确保在 openFB.login() 的回调中调用 $scope.$apply()这将会运行，一切都会正常。

您不应该使用此方法的原因是(我想)openFB.getLoginStatus 函数并不是特别简单，甚至可能涉及 HTTP 请求 - 您传递给 $ 的函数watch 应始终快速且简单，以确保您的应用运行良好。