JavaScript JS 代码中 用户登录安全认证的问题

winnie · 2013年09月03日 · 最后由 winnie 回复于 2013年09月04日 · 7726 次阅读

前是用 AngularJS + Rails 架构,前端都扔给 AngularJS,后端 Rails 来判断是否当前业务操作是否需要用户登录,如果需要,返回错误信息,比如 401 之类,前端 AngularJS 接收到请求认证之后,弹出 modal dialog 登录窗口,请求用户进行登录,如果登录成功,需要继续执行之类的业务操作,这个怎么处理?

G 了大部分代码都是基于 url 登录页面来保存操作业务的 url,然后登录完成之后再进行 Redirect,像我这种 弹出窗口的,成功之后继续执行某个操作的好像没有。

再 G 了一回,Ruby 中有类似的包装模式,执行完成之后,然后回调 ControlName#MethodName,这样挺美好的。

但是 JS 中怎么实现呢?这种弹出窗口根据业务需要可能不止一层,比如:先判断是否登录,再判断帐户余额是否够,再判断用户是否符合操作权限,一层一层下来,最终回调一开始要执行的业务操作,这中间怎么传递呢?又怎么回调执行呢?

找到终极解决方案https://github.com/GaetanGiraud/angular-login.git

让 API 返回 403 permission denied,NG 里统一处理 403 的返回,所果返回就显示登录对话框,登录成功后只要关掉登录框让用户继续操作就好了。也可以让 controller 去捕捉 403 的返回,登录成功后重试登录前的操作。

这个问题我之前调查过。这里有一些资料。基本可以很好的解答你的问题 (我认为).

如何解决就由原文来告诉你吧,说得非常清楚 http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

然后 github 上有人给出了简单的实现示例: https://github.com/witoldsz/angular-http-auth

当你看明白了上面的东西,这里有一个完整的例子: https://github.com/angular-app/angular-app/tree/master/client/src/common/security


以上是 HTTP Auth (一般的邮件登录认证方式) 的解决方案。而 OAuth 基本可以基于它来做进一步操作。

只是对 OAuth 的回调处理比较麻烦。但基本可以用弹出窗口来解决问题. 这里也有一个很好的例子:

https://github.com/enginous/angular-oauth

我当时觉得这个例子中的解决办法还是不太完美....忘记是为什么了. 噢,还有就是。google oauth2 的 javascript sdk 似乎很好的解决了我觉得不完美的问题. 但是 sdk 的代码是压缩且超级异步加载的,根本就看不出什么鸟东西。于是没心情去扒了。

再就是,你可以去扒扒 disqus 的实现方式。

好吧,再说说下去我就该写篇 blog 了。

对。没错。我要去写篇 blog.

@ichord 你的思路跟我一样的,我也是找了这些材料,才有最终那个问题的: redirectUri 这里能回调业务操作的 js 函数就搞定了,这中间可能会有几层判断条件,但最终条件满足时,应该继续业务操作,而不是跳回来让用户再操作。

@doitian 也可以让 controller 去捕捉 403 的返回,登录成功后重试登录前的操作。

这个思路有点意思

@all 查到一个不完美的解决方案:

需要回调的业务操作方法定义一个消息,比如: $scope.$on( 'someEvent',业务操作 () )

然后在把 someEvent 像 RedirectURL 一样塞进某个全局变量或 session 值里,当弹出窗或其他操作完成之后,触发变量中保存的消息,并清空那个全局变量。 $scope.$emit('someEvent', args);

相当于帮用户重新执行一次业务操作。收工!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号