加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – Passport.js,Express.js和Angular.js路由:它们如

发布时间:2020-12-17 17:38:33 所属栏目:安全 来源:网络整理
导读:我道歉这个问题有点长,但我已经研究了一段时间了,真的需要解释所有的故事. 背景:应用程序基于MEAN堆栈,尝试使用Passport.js授权Facebook登录. 在Passport.js guide之后,我实现了类似于: // HTML a href="/connect/facebook" target="_self"Add a Facebook
我道歉这个问题有点长,但我已经研究了一段时间了,真的需要解释所有的故事.

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

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

// 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',{
    successRedirect : '/profile',failureRedirect : '/profile'
    }));

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

因此,我尝试使用Passport.js here建议的自定义回调,希望将json数据传递给Angular,并让Angular进行路由.我最终做了类似的事情:

// 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',{ 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解释说,显然自定义回调适用于本地登录.但是你在这看到问题了吗?我从Angular打电话给/ connect / facebook,但我应该从/ connect / facebook / callback收到一些json.

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

编辑:
Passport-Facebook GitHub account报告了同样的问题.在那里发布了一些额外的尝试,但尚未解决.

解决方法

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

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

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

实际上,您应该尝试使用successRedirect:’#/ profile’,请记住,angular中的配置文件路径应该被视为app入口点.

希望这能让你开始.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读