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'指令吗？你需要这个＆＃34; bootstrap＆＃34;整个申请。您还需要将ui.router声明为依赖项，您需要这样才能使其发挥作用。

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

希望这有帮助！

完全失去AngularJS身份验证实现

1 个答案: