角应用，认证和解析器的顺序（用户界面 - ）路由器 [英] Angular-app, authentication and order of resolvers in (ui-)router

问题描述

这个问题指的是角应用项目，它验证用户身份的方式。

This questions refers to the angular-app project and the way it authenticates users.

通过使用路由器上的决心子句中的原始实现卫兵访问某些网址。这看起来像：

The original implementation guards access to some urls by using resolve clause on the router. This looks like:

$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
}

}）;

该视图不会呈现，直到用户进行身份验证和项目获取（以prevent UI闪烁）。如果用户没有通过身份验证，然后登录弹出弹出，用户提交它，然后之后的承诺得到解决，并显示一个请求的页面。如果Projects.all（）调用，不需要身份验证这工作不错。

The view is not rendered until a user is authenticated and projects are fetched (to prevent ui flickering). If a user is not authenticated then login popup pops up and after user submits it then the promise is resolved and a requested page is displayed. This works nice if auth is not required on Projects.all() call.

下面是服务器调用的日志：

Here's the log of server calls:

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 /收藏/项目的调用也有效的未认证用户。

The call to angular_app/collections/projects is valid even for unauthenticated user.

在我的情况，我有以下code：

In my case I have the following code:

$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-路由器和Restangular）该API调用必须进行认证。服务器日志如下：

The difference is (except I use ui-router and Restangular) that the api call has to be authenticated. Server log looks like:

[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状态code在这里。其效果是，用户看到弹出登录，认证但后来看到空白页。我想这是因为数据获取承诺失效。

Note 403 status code here. The effect is that user sees login popup, authenticates but then sees empty page. I suppose this is because of data fetching promise failure.

我的问题是 - 它在某种程度上可以强制承诺的秩序？我想先检查，如果用户进行身份验证，然后发放到后端等来电或有没有其他的解决方案，我可以使用吗？我正在学习角所以即使有给我一个简单的解决方案不是很明显。

My question is - is it somehow possible to force order of promises? I'd like to first check if user is authenticated then issue a call to the backend etc. Or is there any other solution I can use here? I'm learning Angular so even if there's a simple solution it is not obvious to me.

推荐答案

我喜欢用解析模式，但发现很难在角UI路由器做这些类型的东西。

I love using the resolver pattern but find it very difficult to do these types of things in angular ui router.

一种解决方案是依赖性authenticatedUser解析的结果，注入到你想要保护像API调用解析：

one solution is to dependency inject the result of the authenticatedUser resolver into the api call resolver you want protected like:

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

这样的解析器将在运行链（authenticatedUser - > ticketsy），而不是异步的一次。

This way the resolvers will run in a chain (authenticatedUser -> ticketsy) rather than async all at once.

我希望这有助于..希望有这样做的更好的办法呢..这就是通过堆栈溢出为什么即时搜索。

I hope this helped.. wish there was a better way of doing it.. thats why im search through stack overflow.

这篇关于角应用，认证和解析器的顺序（用户界面 - ）路由器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！