成功登录后将用户数据从 Nodejs 服务器推送到 Angular

Posted 2023-03-07

【中文标题】成功登录后将用户数据从 Nodejs 服务器推送到 Angular

【英文标题】：Pushing user data from Nodejs server to Angular after successful login

【发布时间】：2014-08-12 01:24:15

【问题描述】：

我尝试使用 PassportJS 通过 Facebook 登录我的用户并将用户数据传递给 Angular。 在服务器端，用户控制器中 Facebook 回调的以下代码看起来一切正常：

exports.facebookCallback = function() 
return function(req, res, next) 
    passport.authenticate('facebook', function(err, user, email) 
        if (err || !user) 
            return res.redirect('/auth');
        
        req.login(user, function(err) 
            if (err) 
                return res.redirect('/auth');
            
            return res.redirect('/');
        );
    )(req, res, next);
 ;
;

根据我从 PassportJS 文档中了解到的情况，调用 req.login 应该将用户数据放入会话中。

我在服务器端的路由如下所示：

app.get('/auth', usersCtrl.auth);
app.get('/auth/signout', usersCtrl.logout);
app.get('/auth/facebook', passport.authenticate('facebook', 
    scope: ['email', 'user_hometown']
));
app.get('/auth/facebook/callback', usersCtrl.facebookCallback());

快递和护照配置包括：

app.use(express.cookieParser());
app.use(express.session(secret: '1234567890QWERTY'));
app.use(express.bodyParser());
app.use(passport.initialize());
app.use(passport.session());

现在在角度方面，我尝试在这样定义的服务中从会话中获取用户数据：

module.exports = require('angular')
.module('HomeModule', [])
.controller('HomeCtrl', function ($scope) 
       //home controller code ors here
).controller('NavbarCtrl', ['$scope', 'Authentication', function ($scope, Authentication) 
    $scope.authentication = Authentication;
    //rest of the navbar controller goes here
]).factory('Authentication', [
    function() 
        var _this = this;

        _this._data = 
            user: window.user
        ;

        return _this._data;

    
]);

不幸的是，用户数据在 window.user 的角度侧不可用。 有什么想法我在这里做错了吗？

【问题讨论】：

window.user 是您在页面加载时将用户从服务器传递到客户端的方法吗？如果是这样，是否真的设置了？

并非如此。我是 JS 世界的新手，所以我可能无法理解所有内容。这是我的看法：PassportJS 的 req.login 函数将用户数据放入会话中（并且已通过调试确认），现在在客户端，此会话变量在窗口对象中可用。我错了吗？

Passport 使您的经过身份验证的用户可以通过req.user 表达，但这在客户端（存在window）中不可用，除非您将其设置为这样。您可以在呈现您的索引页面的函数上方包含吗？

这里是渲染部分：module.exports = function(req, res) res.render('index', user: req.user || null ); ;

您的角度代码实际上应该只呈现一次，最初，然后自己进行身份验证调用。您可能想查看Angular's $resource API 以了解更多信息。

【参考方案1】：

正如 Girish 所说，护照会话对象在客户端将不可用。正如您似乎在使用express，一个简单的方法是使用express-expose。

如果您希望用户数据在用户通过身份验证时在所有页面上都可用，您可以在您的路由声明之前添加类似这样的内容

app.use(function (req, res, next) 
    if (req.isAuthenticated()) res.expose(req.user, 'user');
    next ();
);

用户数据将在客户端以window.user 的形式提供。

【参考方案2】：

护照会话对象在窗口对象上不可用，相反，您需要使用某些服务或重定向 url 从服务器获取它。

认证成功后，会调用主路由函数， 在这种情况下，它会将用户重定向到主页。

   app.get('/auth/facebook/callback', 
     passport.authenticate('facebook',  failureRedirect: '/login' ),
     function(req, res) 
     res.redirect('/');
   );


   app.get('/', function(req, res)
    res.render('index',  user: req.user );
   );

或者你可以创建一个路由来获取登录的用户数据

   app.get('/account', function(req, res)
     if (req.isAuthenticated())  
       res.send(user : req.user); 
     else
       res.redirect('/login');
     
   );

在 Angular 方面，您可以从 $http 响应中将用户数据设置为 rootscope，

$rootScope.session = 
$rootScope.session.user = res.user;