当前位置: 首页 > 面试题库 >

(ui-)router中的Angular-app,解析器的身份验证和顺序

梅逸清
2023-03-14
问题内容

此问题涉及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()调用中不需要身份验证,则此方法很好用。

这是服务器调用的日志:

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', {
        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-> tickety),而不是一次全部同步。

我希望这可以帮助..希望有一种更好的方法..那就是为什么即时搜索通过堆栈溢出。



 类似资料:
  • 我正在尝试使用Firebase验证Vue.js应用程序。 我有一个问题,如果在登录时尝试直接访问受登录保护的URL,路由器将在firebase之前加载并检查身份验证状态。js有时间返回auth响应。这会导致用户被弹回登录页面(当他们已经登录时)。 如何延迟vue-router导航直到从Firebase检索到auth状态?我可以看到Firebase将auth数据存储在local存储中,检查它是否作为

  • 本文向大家介绍详解Angular开发中的登陆与身份验证,包括了详解Angular开发中的登陆与身份验证的使用技巧和注意事项,需要的朋友参考一下 前言 由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面。 本篇文章中的身份验证,指的是如何确定用户是否已经登陆,并确保在每次与服务器的通信中,都能够满足服

  • 问题内容: 有谁知道或知道我可以学习如何使用Python和Google App Engine创建自定义身份验证过程的地方? 我不想使用Google帐户进行身份验证,也希望能够创建自己的用户。 如果不是专门针对Google App Engine,是否有关于如何使用Python和Django实现身份验证的资源? 问题答案: django 1.0今天在Google AppEngine上进行了更新。但是您

  • 我们正在构建一个Angular 5应用程序前端应用程序,节点作为后端层。angular对节点的API请求通过基本身份验证进行身份验证,但我们计划通过Okta为angular web应用程序实现SAML身份验证 有人能建议如何为Angular实现SAML吗

  • 问题内容: 我是AngularJS的新手,在以下情况下我对如何使用angular-“ ui-router”感到有些困惑: 我正在构建一个包含两个部分的Web应用程序。第一部分是带有登录和注册视图的主页,第二部分是仪表板(成功登录后)。 我为home部分创建了一个带有角度应用程序和配置的,用于处理和查看,还有一个针对仪表板部分的文件,其应用程序和配置用于处理许多子视图。 现在,我完成了仪表板部分,并

  • 问题内容: 我正在使用angular-ui-router 从服务器获取数据,然后再进入一种状态。有时,对服务器的请求失败,我需要通知用户有关失败的信息。如果我从控制器呼叫服务器,则可以在呼叫失败的情况下在其中放置并呼叫通知服务。我将呼叫发送到服务器是因为我希望子孙状态在服务器启动之前等待服务器的结果。 万一对服务器的调用失败,在哪里可以捕获错误?(我已经阅读了文档,但仍然不确定如何使用。此外,我正