1

我对 Angular JS 开发真的很陌生，我正在尝试实现以下身份验证模块：https ://github.com/witoldsz/angular-http-auth （更多信息在http://www.espeo.pl/ 2012/02/26/authentication-in-angularjs-application），到我的项目。

模块

该模块被认为允许以下情况：

  • 用户要求：something.com/secured/formXyz，
  • 服务器发送登录表单，
  • 用户登录，填写一个冗长而复杂的表格，但他们这样做的时间太长以至于他们的会话过期，
  • 用户提交表单，但由于会话不再有效，出现登录屏幕，
  • 一旦用户登录，服务器就可以处理提交的表单，**无需重新输入所有内容**。

做这样的事情的解决方案是：

服务器端行为：

对于每个 /resources/* 调用，如果用户未被授权，则响应 401 状态。否则，当用户被授权或不是 /resources/* 请求时，发送客户端请求的内容。

客户端行为：

  • 捕获 401 响应，
  • 保存请求参数，以后我们可以重构原始请求，
  • 创建并返回代表服务器未来答案的新对象（而不是返回原始的失败响应），
  • 广播需要登录，因此应用程序可以做出反应，特别是可以出现登录表单，
  • 监听登录成功事件，因此我们可以收集所有保存的请求参数，再次发送它们并触发所有“未来”对象（之前返回）。

我的项目

我的项目是一个基本的项目，它使用 $route 服务。当我尝试添加捕获事件的指令时：

脚本/指令/login-directive.js

angular.module('myApp', ['http-auth-interceptor','content-mocks'])
/**
* This directive will find itself inside HTML as a class,
* It is responsible for showing/hiding login form.
*/
.directive('authDirective', function() {
return {
  restrict: 'C',
  link: function(scope, elem, attrs) {  
    
    var login = elem.find('#login');
    var main = elem.find('#main');
    
    login.hide();
    main.show();
    
    scope.$on('event:auth-loginRequired', function() {
        login.show();
        main.hide();
    });
    scope.$on('event:auth-loginConfirmed', function() {
        main.show();
        login.hide();
    });
  }
}
});

到我的 index.html ：

<body ng-app='myApp' class='auth-directive'>
    
    <!--[if lt IE 7]>
    <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="components/es5-shim/es5-shim.js"></script>
    <script src="components/json3/lib/json3.min.js"></script>
    <![endif]-->
    
    <div id="login" name="login">
        <p>login</p>
    </div>

    <div id="main" name="main">
        <p>main</p>
        <div class="container" ng-view></div>
    </div>
    
    <script src="components/angular/angular.js"></script>
    <script src="components/angular-resource/angular-resource.js"></script>
    <script src="components/angular-cookies/angular-cookies.js"></script>
    <script src="components/angular-sanitize/angular-sanitize.js"></script>
    <script src="components/angular-http-auth/angular-mocks-1.0.1.js" type="text/javascript"></script>
    <script src="components/angular-http-auth/http-auth-interceptor.js" type="text/javascript"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/directives/login-directive.js"></script>
    <script src="scripts/mocks/content-mocks.js" type="text/javascript"></script>

</body>

指令 ngView 不再起作用。控制台日志上没有任何内容。这两个指令之间是否有任何不兼容？

4

1 回答 1

2

通过您的登录指令文件的外观，您似乎（不正确地）通过将依赖项数组作为第二个参数传递给您的angular.module调用来重新初始化您的 Angular 应用程序：

angular.module('myApp', ['http-auth-interceptor','content-mocks'])

依赖项应该只定义一次，当应用程序初始化时（可能在 app.js 中），当你想在另一个文件中引用你的应用程序时，你应该调用不带第二个参数的 angular.module：

angular.module('myApp')
   .directive('authDirective', function() { ...
于 2013-06-26T11:16:43.633 回答