Redirect to a login page if the user is not yet logged in Angular JS

Question

How can I prevent user enter App url's if he doesn't logged.

App.js:

var MTApp = angular.module('MTApp', ['MEControllers','ui.router','services']);

    MTApp.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
         .state('/', {
                url: '/',
                templateUrl: 'login.html'})             
            .state('login-app', {
                url : '/Login',
                templateUrl : 'login.html'})

           .state('input-parameters', {
            url : '/Parameters',
            templateUrl : 'parameters.html'});
    })

main.js:

    var MEControllers = angular.module('MEControllers',[]);
    MEControllers.controller('LoginAppCtrl', LoginAppCtrl);
    MEControllers.controller('RequestCtrl', RequestCtrl);

    function LoginAppCtrl($scope, $http,utilities,$location,$rootScope) {           
            var self = this;

            self.request = {
                     user: '',
                     password:''
            }
            self.postprocess = function(){
                //self.request.values = self.request.values.split(",");
            }
            self.submitRequest = function(){
                self.postprocess();
                console.log(self.request);
                $http({
                    method : 'POST',
                    url : url,
                    headers: {'Content-Type': 'application/json'},
                    data : self.request
                }).success(function(data, status, headers, config) {

                    if (data.status) {
                        // successfull login
                    //  User.isLogged = true;
                    //  User.username = data.user;
                    //  $rootScope.loggedInUser = $scope.user;
                        $location.path("/Parameters");
                    }
                    else {
                    //  User.isLogged = false;
                        //User.username = '';
                    }   

                }).error(function(data, status, headers, config) {
                    alert('Invalid Login Details');
                });

            }

            this.validate = function(){
                console.log(self.request);


            }
        }

        function RequestCtrl($scope, $http,utilities,$location) {
            var self = this;            
            self.request = {

            }
            self.postprocess = function(){

            }
            self.submitRequest = function(){
                self.postprocess();
                console.log(self.request);
                $http({
                    method : 'POST',
                    url : url,
                    headers: {'Content-Type': 'application/json'},
                    data : self.request
                }).success(function(data, status, headers, config) {

                    utilities.setOutput(data);                    
                    console.log(data);


                }).error(function(data, status, headers, config) {
                    alert('Error!');
                });

            }

            this.validate = function(){
                console.log(self.request);


            }
        }

How can I get indocation if user log-in? Moreover How can I prevent user to enter pages through url, how can I hide the url?

score 0 · Answer 1 · answered Feb 10 '15 at 10:57

You could make a local storage objectwith auth details and check when the user starts the app like this:

if(window.localStorage.auth) {
    $urlRouterProvider.otherwise('/tab/index');
}else{
    $urlRouterProvider.otherwise('/login');
}

and in your main controller something like :

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    event.preventDefault(); 
    if(window.localStorage.auth) {
        $state.go(toState.name)
    }else{
        $urlRouterProvider.otherwise('/login');
    }

})

which should check when the route changes.

score 0 · Answer 2 · edited May 23 '17 at 10:33

You can do it with the help of $rootscope service.On every routeChange Start Check that if user is login or not(you can create service to check) and if user is logged in redirect to desired page otherwise redirect it on login page. Here is the required code

   app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
        $rootScope.$on('$routeChangeStart', function (event) {

            if (!Auth.isLoggedIn()) {
                console.log('DENY');
                event.preventDefault();
                $location.path('/login');
            }
            else {
                console.log('ALLOW');
                $location.path('/home');
            }
        });
    }]);

     .factory('Auth', function(){
    var user;

    return{
        setUser : function(aUser){
            user = aUser;
        },
        isLoggedIn : function(){
            return(user)? user : false;
        }
      }
    })

Ps:- Sorry for bad english.

Source

Redirect to a login page if the user is not yet logged in Angular JS

2 Answers2