Question

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

THE MODULE

该模块被认为允许以下场景：

用户请求：something.com/secured/formXyz，
服务器发送登录表单
用户登录，填写了一个冗长而复杂的表单，但他们这么做是为了让他们的会话到期，
用户提交表单，但由于会话无效，因此会显示登录屏幕
一旦用户登录，服务器就可以处理提交的表单，**无需再次重新输入所有内容**。

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

服务器端行为：

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

客户端行为：

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

我的项目

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

脚本/指令/登录-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不再起作用。控制台日志中没有任何内容。两个指令之间是否存在任何不兼容性？

Answer 1

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

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

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

angular.module('myApp')
   .directive('authDirective', function() { ...

AngularJS身份验证 - 指令之间不兼容？

THE MODULE

我的项目

1 个答案: