javascript - 完全迷失在 AngularJS 身份验证实现上

Question

我不是编程新手，但我是 AngularJS 新手。我正在使用我的第一个 AngularJS 站点，并希望向我的应用程序添加身份验证和授权层。我正在尝试关注这篇看起来非常简单的文章:https://medium.com/@mattlanham/authentication-with-angularjs-4e927af3a15f

但是，我发现太多的 AngularJS 文章只给出了片段，而没有实际指导在哪里来实际实现代码!非常非常令人沮丧。 . .

我有一个:

• 我的应用程序根目录中的 app.js
• 我想放在授权层后面的页面的 controller.js
• 我也有相应的 REST 服务来处理用户身份验证

谁能帮我区分文章中的哪些项目应该放在 app.js 中(如果有？？？)，哪些应该放在我的个人页面中？

我的 app.js 看起来像:

var app = angular.module('appname', [$stateProvider]);
app.config(function($stateProvider, $urlRouterProvider){
    alert("auth fired");
    $stateProvider
        .state("account", {
            url: "/account.html",
            templateUrl: "/account.html",
            controller: "HistoryCtrl",
            authenticate: true
        })
        .state("login", {
            url: "/login.html",
            templateUrl: "/login.html",
            controller: "LoginCtrl",
            authenticate: false
        });
    // Send to login if the URL was not found
    $urlRouterProvider.otherwise("/login.html");
});

我想要保护的页面看起来像:

var app = angular.module('appname',  []);
app.controller('HistoryCtl', function($scope, $http) {
    app.config(['$httpProvider', function ($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
        $httpProvider.defaults.headers.common = {};
        $httpProvider.defaults.headers.post = {};
        $httpProvider.defaults.headers.put = {};
        $httpProvider.defaults.headers.patch = {};
    }]);

    $http({
        method: "post",
        url: "http://serviceURL/v1/account",
        headers:{'Content-Type': 'application/json'},
        data: {"txtToken":"myusertoken"}
    }).success(function (response) { $scope.names = response.entries;});
});

app.run(function ($rootScope, $state, AuthService) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
        if (toState.authenticate && !AuthService.isAuthenticated()){
            // User isn’t authenticated
            $state.transitionTo("login");
            event.preventDefault();
        }
    });
});

但这些似乎都没有触发，控制台中也没有错误。人们将如何实现文章中的片段？有人可以根据每个片段应该放在的文件将其分解吗？我是否需要在我的 HTML 中将 app.js 声明为源文件，或者在 HTML 标记中使用应用程序名称是否足够？

Answer 1

欢迎来到 Angular!你能验证你的 HTML 中是否有 ng-app='appname' 指令吗？您将需要它来“引导”整个应用程序。您还需要将 ui.router 声明为依赖项，您需要它才能正常工作。

我在 Stormpath 工作我们有一个指南，向您展示如何从头开始构建 Angular 应用程序，包括授权(使用我们的模块)。您可以在这里找到它:Stormpath's AngularJS Guide

希望这对您有所帮助!