javascript – (ui-)路由器中的解析器的角度应用,认证和顺序

前端之家收集整理的这篇文章主要介绍了javascript – (ui-)路由器中的解析器的角度应用,认证和顺序前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这个问题是指 angular-app项目及其认证用户的方式.

原始实现通过在路由器上使用resolve子句来保护对某些URL的访问.这看起来像:

$routeProvider.when('/projects',{
templateUrl:'projects/projects-list.tpl.html',controller:'ProjectsViewCtrl',resolve:{
  projects:['Projects',function (Projects) {
    //TODO: fetch only for the current user
    return Projects.all();
  }],authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
}

});

用户进行身份验证并获取项目(以防止ui闪烁)之前,不会呈现视图.如果用户未通过身份验证,则会弹出登录弹出窗口,并在用户提交之后,解决承诺并显示所请求的页面.如果在Projects.all()调用中不需要auth,这很好.

以下是服务器调用的日志:

127.0.0.1 - - [Mon,28 Oct 2013 11:15:47 GMT] "GET /projects HTTP/1.1" 200 739 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0"
Unauthenticated
127.0.0.1 - - [Mon,28 Oct 2013 11:15:47 GMT] "GET /current-user HTTP/1.1" 200 24 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0"
Unauthenticated
Unauthenticated
127.0.0.1 - - [Mon,28 Oct 2013 11:15:47 GMT] "GET /current-user HTTP/1.1" 200 24 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0"
127.0.0.1 - - [Mon,28 Oct 2013 11:15:47 GMT] "GET /databases/angular_app/collections/projects?q=%7B%7D HTTP/1.1" 200 10 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0"
Unauthenticated
127.0.0.1 - - [Mon,28 Oct 2013 11:15:59 GMT] "POST /login HTTP/1.1" 200 161 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0"

对于未认证的用户,对angular_app / collections / projects的调用是有效的.

在我的情况下,我有以下代码

$stateProvider
    .state('root.tickets',{
        url: '/tickets',views: {
            'container@': {
                templateUrl: 'tickets/tickets-list.tpl.html',controller:'TicketsViewCtrl',resolve:{
                  ticketsy: ['Restangular',function (Restangular) {
                    //Call to tickets must be authenticated
                    return Restangular.all('tickets').getList();
                  }],authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
                }
            }
        }

区别是(除了我使用ui-router和Restangular)api调用必须进行身份验证.服务器日志看起来像:

[28/Oct/2013 05:50:15] "GET /api/tickets/ HTTP/1.1" 403 59
[28/Oct/2013 05:50:15] "GET / HTTP/1.1" 200 963
[28/Oct/2013 05:50:16] "GET /api/current-user/ HTTP/1.1" 200 14
[28/Oct/2013 05:50:16] "GET /api/tickets HTTP/1.1" 301 0
[28/Oct/2013 05:50:16] "GET /api/tickets/ HTTP/1.1" 403 59
[28/Oct/2013 05:50:22] "POST /api/login/ HTTP/1.1" 200 120

注意403状态码在这里.效果用户看到登录弹出窗口,进行身份验证,但看到空页面.我想这是因为数据获取承诺失败.

我的问题是 – 是否有可能强制许诺?我想首先检查用户是否被认证,然后发出对后端等的呼叫或者还有其他可以在这里使用的解决方案吗?我正在学习Angular,即使有一个简单的解决方案对我来说并不明显.

解决方法

我喜欢使用解析器模式,但发现在角ui路由器中做这些类型的事情是非常困难的.

一个解决方案是依赖性将authenticatedUser解析器的结果注入您想要保护的api调用解析器,如:

$stateProvider
    .state('root.tickets',resolve:{
                  authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser,ticketsy: function (Restangular,authenticatedUser) {
                    //Call to tickets must be authenticated
                    return Restangular.all('tickets').getList();
                  }
                }
            }
        }

这样,解析器将以一个链(authenticatedUser – > tickety)运行,而不是一次同步.

我希望这有帮助..希望有一个更好的方式来做..这就是为什么im搜索堆栈溢出.

原文链接:https://www.f2er.com/js/151127.html

猜你在找的JavaScript相关文章