Passport.js,Express.js和Angular.js路由:它们如何共存？

Question

我道歉这个问题有点长,但我已经研究了一段时间了,真的需要解释所有的故事.

背景:应用程序基于MEAN堆栈,尝试使用Passport.js 授权 Facebook登录.

在Passport.js 指南之后,我实现了类似于:

// HTML
    <a href="/connect/facebook" target="_self">Add a Facebook login</a>
// send to facebook to do the authentication
app.get('/connect/facebook',isLoggedIn, passport.authorize('facebook', 
    { scope : 'email' })
);
// handle the callback after facebook has authorized the user
app.get('/connect/facebook/callback',
    passport.authorize('facebook', {
    successRedirect : '/profile',
    failureRedirect : '/profile'
    }));

注意target=_self在html中跳过Angular路由.显然,授权工作正常.但是,重定向不起作用,因为路由由Angular处理.授权后,我永远不会登陆/profile(但在默认的Angular路线上).

因此,我有一个自定义的回调试图通过Passport.js的建议在这里,使用JSON数据传递到角的希望,让角做路由.我最终做了类似的事情:

// In the controller
$http.get("/connect/facebook").success(function(data){
    // here I wait for json data from the server and do the routing
});
// I call this route from Angular
app.get('/connect/facebook',isLoggedIn,passport.authorize('facebook', 
    { scope : 'email' })
);
// But Facebook lands here!
app.get('/connect/facebook/callback',function(req, res, next) {
    passport.authorize('facebook', function(err, user, info) {
        res.json({something:smtg});
        ...

Passport.js解释说,显然自定义回调适用于本地登录.但是你在这看到问题了吗？我/connect/facebook从Angular 打来电话,但我应该收到一些json /connect/facebook/callback.

我即将放弃Passport,但在此之前,您是否看到任何允许/profile在FB授权后登陆的解决方案,也许是自定义消息？非常感谢您的阅读.

编辑:相同的问题已被报告为Passport-Facebook GitHub帐户的问题.在那里发布了一些额外的尝试,但还没有完全修复.

Answer 1

这比一个答案中描述的要深一些,但我会尝试开始指向正确的方向.

从本质上讲,Angular.js路由根本不是真正的HTML路由,而是恰好使用URL来使用最终用户的内部路由结构.请记住,Angular.js是一个客户端脚本,并且不需要整页重新加载,因为这将重新加载整个脚本.因此,/#用于欺骗浏览器跳转到已加载脚本中的特定代码位.(与HTML文档中的传统锚点位置相对).不幸的是(或者幸运的是),HTML 5模式允许你隐藏/#网址的一部分,所以不要http://somesite.com/#/someroute只看到你看到的http://somesite.com/someroute.但请放心,/#它仍然存在.Angular.js使用HTML5 pushState(AKA HistoryAPI)来执行魔术替换.

鉴于此,如果您已调用服务器路由,则您在Angular.js脚本之外,并且任何再次加载角度脚本的调用将从头开始.实际上,如果没有完全重新加载,您无法从服务器调用Angular.js路由.因此,您实际上在这里进行双重路由重定向.您的服务器应该调用它的角度默认路由,附加/#/someroute到呼叫.angular.js页面将加载,解析/#,并重定向到正确的角度路径.但请记住,如果对已加载的对象存在任何依赖性,则这些对象不再存在于内存中.因此,以这种方式访问​​的任何路由都应该像应用程序的入口点一样运行.

实际上,您应该尝试使用successRedirect : '#/profile',请记住,profile角度中的路线应被视为应用入口点.

希望这能让你开始.