(ui-)router 中的 Angular-app、身份验证和解析器顺序 [英] Angular-app, authentication and order of resolvers in (ui-)router
问题描述
此问题涉及 angular-app 项目及其对用户进行身份验证的方式.
This questions refers to the angular-app project and the way it authenticates users.
原始实现通过在路由器上使用解析子句来保护对某些 url 的访问.这看起来像:
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
}
});
在用户通过身份验证并获取项目之前不会呈现视图(以防止 ui 闪烁).如果用户未通过身份验证,则会弹出登录弹出窗口,并在用户提交后解决承诺并显示请求的页面.如果 Projects.all() 调用不需要 auth,这很有效.
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/collections/projects 的调用即使对于未经身份验证的用户也是有效的.
The call to angular_app/collections/projects is valid even for unauthenticated user.
就我而言,我有以下代码:
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-router 和 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 状态代码.效果是用户看到登录弹出窗口,进行身份验证但随后看到空白页面.我想这是因为数据获取承诺失败.
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.
我的问题是 - 是否有可能以某种方式强制承诺的顺序?我想首先检查用户是否通过身份验证,然后向后端等发出调用.或者我可以在这里使用任何其他解决方案吗?我正在学习 Angular,所以即使有一个简单的解决方案,对我来说也不是很明显.
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.
推荐答案
我喜欢使用解析器模式,但发现在 angular ui router 中很难做这些类型的事情.
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.
这篇关于(ui-)router 中的 Angular-app、身份验证和解析器顺序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!