【问题标题】:req.user data from Passport JS not passed to Angular Controller来自 Passport JS 的 req.user 数据未传递给 Angular 控制器
【发布时间】:2017-01-02 15:17:18
【问题描述】:

我正在构建一个带有 Express/Node 后端和前端 Angular JS 的应用程序。使用这个堆栈有点新,我很难在 Angular 服务 + 控制器中接收数据

后端:用户可以使用将用户对象附加到每个请求的 Passport JS 向 Facebook 进行身份验证。我打开了一个端点来检查 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 中要做的是向这个 /checklogin 端点发送一个 http.get 并处理响应。如果用户经过身份验证(req.user 存在与否),我想绑定到范围,如果是,则绑定 displayName 和 Id,并隐藏显示导航链接和页面。

但是我在 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>

非常感谢任何帮助,谢谢!

【问题讨论】:

  • 它命中了API,但是你检查过API是否真的返回了结果吗?也许尝试使用 Postman 或其他东西
  • 您的服务器是否返回任何数据?也许req.user 是空的
  • 我实际上可以在浏览器中这样的响应:{"id":"179884","displayName":"John Doe","name":{},"provider":"facebook ","_raw":"{\"name\":\"Joh‌​n Doe\",\"id\":\"179884\"}","_json":{"name":"John Doe" ,"id":"179884"}}

标签: javascript angularjs node.js express


【解决方案1】:

如果你在控制器中使用then,你应该从服务中返回一个承诺,即

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

    this.isLoggedIn = function(){  

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

【讨论】:

  • 嗨阿曼,我把服务改成了这个,但控制器仍然没有记录任何数据。我在控制器内做错了什么?我看到每次刷新页面时,它都会访问 API,因此我的服务中的 $http.get 可以正常工作,但我的控制器中似乎没有任何反应......
  • 是的,它以这种格式发送响应:{"id":"179884","displayName":"John Doe","name":{},"provider":"facebook" ,"_raw":"{\"name\":\"John Doe\",\"id\":\"179884\"}","_json":{"name":"John Doe","id ":"179884"}}
【解决方案2】:

您的服务中的.isLoggedIn 函数应如下所示:

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

【讨论】:

  • 嗨 Tilekbekov,我将服务更改为此,但控制器仍然没有控制台记录任何数据。我在控制器内部做错了什么??
【解决方案3】:

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

【讨论】:

    猜你喜欢
    • 2021-12-27
    • 1970-01-01
    • 1970-01-01
    • 2020-12-28
    • 2020-09-17
    • 2015-02-03
    • 1970-01-01
    • 1970-01-01
    • 2013-12-09
    相关资源
    最近更新 更多