Completely Lost on AngularJS Authentication Implementation

Question

I am not new to programming, but I am new to AngularJS. I am working with my first AngularJS site and am looking to add an authentication & authorization layer to my app. I am trying to follow this article which seems to be very straight forward: https://medium.com/@mattlanham/authentication-with-angularjs-4e927af3a15f

However, I find that too many AngularJS articles only give snippets without actually giving guidance on where to actually implement the code! Very, very frustrating . . .

I have a:

app.js in my app root directory
controller.js for a page that I want to put behind an authorization layer
I also have the corresponding REST services to handle the user authentication

Can someone please help me distinguish what items from the article should go in app.js (if any???) and which ones should go in my individual page?

My app.js has looked like:

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");
});

And the page I want to secure looked like:

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();
        }
    });
});

But none of these seemed to fire and there were no errors in the console. How would one go about implementing the snippets from the article? Can someone please break it out according to the file in which each snippet should go? Do I need to declare app.js as a source file in my HTML or is using the app name in the HTML tag sufficient?

robertjd · Accepted Answer · 2015-04-20 16:36:56Z

1

Welcome to Angular! Can you verify that you have an ng-app='appname' directive in your HTML? You'll need this to "bootstrap" the entire application. You'll also need to declare ui.router as a dependency, which you'll need in order for this to work.

I work at Stormpath and we have a guide which shows you how to build an Angular application from scratch, including authorization (using our module). You can find it here: Stormpath's AngularJS Guide

Hope this helps!

answered Apr 20, 2015 at 16:36

robertjd

4,9431 gold badge28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Completely Lost on AngularJS Authentication Implementation

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related