Facebook 登录后 $location.path() 不工作

Question

我有这个控制器：

.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 该库何时触发您希望您的应用做出反应的事件。 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 的函数应该总是快速简单地确保您的应用程序运行良好。

Answer 2

Angular $位置文档：https://docs.angularjs.org/api/ng/service/$location

您应该考虑使用 $location.url(<url to go to>)

所以在您的情况下 $location.url("/profile"); 应该可以解决问题。 $location 上的 url 方法是 getter 和 setter，因此无需重新加载页面即可设置 URL。

Facebook 登录后 $location.path() 不工作

$location.path() isn't working after facebook login

javascript

angularjs

facebook