Question

我正在构建一个带有Express / Node后端的应用程序和用于前端的Angular JS。有点新的使用这个堆栈，我很难在Angular Service + Controller中接收数据

后端：用户可以使用Passport JS对Facebook进行身份验证，Passport JS将用户对象附加到每个请求。我打开了一个端点，检查req.user是否存在，如下所示：

app.get('/checklogin', function(req,res,next){

if(req.user){

  console.log("we found a user!!!");

  console.log("name:" + req.user.displayName);
  console.log("user id" + req.user.id);

  return res.status(201).json(req.user);

} else {

  console.log("there is no user logged in");


} 

});

如果req.user存在，那么用户通过身份验证，就会发送JSON响应。

我想要做的是在Angular中将http.get发送到此/ checklogin端点并处理响应。如果用户已经过身份验证（req.user是否存在），我想绑定到范围，如果是，则绑定displayName和Id，并隐藏show nav链接和页面。

但我在Angular中的设置命中了API端点，但似乎没有收到任何数据????：

.service("Login", function($http){

    this.isLoggedIn = function(){  

        return $http.get("/checklogin")

            .then(function(response){

             console.log(response)

                return response;

            }, function(response){

                console.log("failed to check login");

            });

    };


})
.controller("mainController", function($scope, Login){


    Login.isLoggedIn()

        .then(function(doc){

            console.log(doc);
            console.log(doc.data);

        }, function(response){

            alert(response);

        });

})

console.log（doc）和console.log（doc.data）没有记录任何内容......我在这里做错了什么?????

更多信息：mainController加载到index.html文件中：

<html lang="en" ng-app="myApp" ng-controller="mainController">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--load jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <!--load Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <!--load Angular JS-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> 
    <!--latest compiled and minified Bootstap CSS-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--link custom CSS file-->
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <script src="/js/app.js"></script>
</head>

<body>
<!-- NAVBAR ================== ---->        
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="nav-header">
            <a class="navbar-brand" href="#/">Votely</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#/">Home</a></li>
                <li><a href="/auth/facebook" target="_top">Sign in with Facebook</a></li>
                <li><a href="/logout">Sign Out</a></li>
            </ul>
        </div>
    </div>
</nav>    

<!-- Dynamically render templates Angular JS -->
<div class="container" ng-view>

</div>


</body>

非常感谢任何帮助，谢谢！

Answer 1

如果您在控制器内部使用then，则应该从服务中返回承诺，即

.service("Login", function($http){

    this.isLoggedIn = function(){  

        return $http.get("/checklogin");
    };

Answer 2

您服务中的

.isLoggedIn功能应如下所示：

this.isLoggedIn = function(){
    return $http.get("/checklogin");
}

Answer 3

谢谢，我现在就开始工作了。我在Cloud 9 IDE中使用浏览器，服务器发送了503响应，不知道为什么。在我设置服务以返回承诺后，它现在可以在Chrome和Firefox等中运行！

来自Passport JS的req.user数据未传递给Angular Controller

3 个答案: