Tips for creating an angularjs login page as the initial page

Question

Tips for creating an angularjs login page as the initial page

I am new to working with AngularJS and I have been experimenting with the generator-angular-fullstack,

My goal is to have the login page load first instead of the main page. After playing around with the code, I found a solution by adding 'authenticate: true' in MainCtrl

angular.module('myapp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainCtrl',
        authenticate: true
      });
  });

I also commented out the line 'event.preventDefault();' in app.js within the run function

.run(function ($rootScope, $location, Auth) {
    // Redirect to login if route requires auth and you're not logged in
    $rootScope.$on('$stateChangeStart', function (event, next) {
      Auth.isLoggedInAsync(function(loggedIn) {
        if (next.authenticate && !loggedIn) {
          //event.preventDefault();
          $location.path('/login');
        }
      });
    });

Although my approach seems to work fine, I'm unsure if these changes are the best solutions or if there are other alternatives available.

javascript angularjs authentication yeoman-generator angular-fullstack

Answer 1

Answer №1

To achieve this, your code structure should follow the example below:

Inside main.js

 angular.module('myapp')  
       .config(function ($stateProvider) {
        $stateProvider
          .state('main', {
            url: '/main',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl'
          });   
      });

In account.js

    angular.module('myapp')
      .config(function ($stateProvider) {
        $stateProvider
          .state('login', {
            url: '/',
            templateUrl: 'app/account/login/login.html',
            controller: 'LoginCtrl'
          })
          .state('signup', {
            url: '/signup',
            templateUrl: 'app/account/signup/signup.html',
            controller: 'SignupCtrl'
          })
          .state('settings', {
            url: '/settings',
            templateUrl: 'app/account/settings/settings.html',
            controller: 'SettingsCtrl',
            authenticate: true
          });
      });

Within login.controller.js

angular.module('myapp')
  .controller('LoginCtrl', function ($scope, Auth, $location, $window) {
    $scope.user = {};
    $scope.errors = {};

    $scope.login = function(form) {
      $scope.submitted = true;

      if(form.$valid) {
        Auth.login({
          email: $scope.user.email,
          password: $scope.user.password
        })
        .then( function() {
          // Successfully logged in, directing to home page
          $location.path('/main');
        })
        .catch( function(err) {
          $scope.errors.other = err.message;
        });
      }
    };

    $scope.loginOauth = function(provider) {
      $window.location.href = '/auth/' + provider;
    };
  });

Answer 2

To achieve this, your code structure should follow the example below:

Inside main.js

 angular.module('myapp')  
       .config(function ($stateProvider) {
        $stateProvider
          .state('main', {
            url: '/main',
            templateUrl: 'app/main/main.html',
            controller: 'MainCtrl'
          });   
      });

In account.js

    angular.module('myapp')
      .config(function ($stateProvider) {
        $stateProvider
          .state('login', {
            url: '/',
            templateUrl: 'app/account/login/login.html',
            controller: 'LoginCtrl'
          })
          .state('signup', {
            url: '/signup',
            templateUrl: 'app/account/signup/signup.html',
            controller: 'SignupCtrl'
          })
          .state('settings', {
            url: '/settings',
            templateUrl: 'app/account/settings/settings.html',
            controller: 'SettingsCtrl',
            authenticate: true
          });
      });

Within login.controller.js

angular.module('myapp')
  .controller('LoginCtrl', function ($scope, Auth, $location, $window) {
    $scope.user = {};
    $scope.errors = {};

    $scope.login = function(form) {
      $scope.submitted = true;

      if(form.$valid) {
        Auth.login({
          email: $scope.user.email,
          password: $scope.user.password
        })
        .then( function() {
          // Successfully logged in, directing to home page
          $location.path('/main');
        })
        .catch( function(err) {
          $scope.errors.other = err.message;
        });
      }
    };

    $scope.loginOauth = function(provider) {
      $window.location.href = '/auth/' + provider;
    };
  });

Tips for creating an angularjs login page as the initial page

Answer №1

Similar questions

Retrieving data arrays from response.json

Tips for removing the pound sign from a URL using AngularJS

Strategies for resolving the error "Cast to ObjectId failed for value"

What is the best way to perform an AJAX request on Hackerrank using JavaScript?

What is the best way to handle parsing JSON using external middleware after the removal of body parser in Express?

How can AngularFire update data without needing to retrieve the existing values?

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

Two distinct iterations of the identical jquery version sourced from external sources

I am interested in utilizing Google Apps Script (GAS) to store images in GoogleDrive and automatically populate the corresponding URL in a

Modify the image source using Javascript

Retrieve JSON Data Using Angular in a Wordpress Environment

Display requested tab feature using jQuery upon page load

Where should I place the .filter method within my jQuery AJAX call?

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

MongoDB subfield pagination technique

Is there a way to use JavaScript to rearrange the order of my div elements?

Using Laravel for login with the option to choose from multiple usernames

Initiate a POST request to download the file upon clicking the button

Showing all elements on page load that are currently being filtered out in React

AngularJS: Retrieving the sequence of choices in md-select with multiple selections