如果未经身份验证，将用户重定向到登录页面

Question

I am using node.js restify as backend and angularjs as frontend.

I have a website which has 3 webpages. This is what I want. Whenever any user visit any of these webpage, they will be redirected to a login page if they are not authenticated.

How I did was force authentication at every webpage. The angular controller looks like this;

.controller('LoginAuthentication', ['$scope', '$http', 'configuration', 'dialogs',
                function($scope, $http, $configuration, dialogs) 
{
    //alert("testing LoginAuthentication controller");        
    var url_check_user_logged_in = '127.0.0.1/users/check_loggedin';

    $http.get(url_check_user_logged_in).success(function(data, status, headers, config)
    {            
        if (data.LoggedInStatus === 'NotLoggedIn')
        {
        console.log('NotLogged');
        window.location.href=$configuration.webroot + "/app/login.html";
    }
    else if (data.LoggedInStatus === 'LoggedIn')
    {


           console.log('Logged');                
        }                
    });
}])//.controller('MyCtrl1', [function() 

Is there a more efficient/effective way in angularjs? This approach violates the DRY (don't repeat yourself) principle because I have to repeat the same code in every webpage.

Answer 1

You could use Angular services. Or like stated before cookies/sessions.

Here is a link to Angular servicesl: https://docs.angularjs.org/guide/services

Answer 2

Add a factory first:

angular.module("myApp").factory('LoginService',function($location){
    var service={};
    service.loggedIn=function(){....}
    service.redirectIfNotLoggedIn=function(){
        if(! service.loggedIn())$location.path("/login");
    }
    return service;
})

Then call LoginService.redirectIfNotLoggedIn() to every page that you have. Also don't forget to complete the service.loggedIn() method, and also to inject LoginService to the respective Controllers .

Answer 3

The answer I gave above works for simple, plain systems. However, I noticed that you are calling the server every time (Am I right?). If you want an asynchronous method, you can add the following to the LoginService :

service.loggedIn=false;
service.asyncAuthorize=function(cb,error){
    $http.get(url_check_user_logged_in).success(function(data){            
        if (data.LoggedInStatus === 'NotLoggedIn'){
            service.loggedIn=false;
            cb(false);
        }else if (data.LoggedInStatus === 'LoggedIn'){
           service.loggedIn=true;
            cb(true);
        }                
    }).error(function(data){
        if(! error) return;
        error(data);

    });
}

Then you can simply call LoginService.asyncAuthorize(cb) or LoginService.asyncAuthorize(cb,fun) which receives a callback if the request fails.

The cb parameter is a function which is executed as the requests. If the user is logged in, cb returns true , otherwise, false . If the request fails to the server, error is called.

Final code in the Controller:

LoginService.asyncAuthorize(function(state){
    console.log(state , "is the login state");
   },function(e){
        console.log("could not contact server");
});

Answer 4

put following code in loginCtrl.js

$scope.login = function(){

            if($scope.email === 'test@test.com' && $scope.password === "1234"){
                $cookies.isLogin = true;
                $cookies.put('isLogin', true);                    
                $state.go('home');
            }
            else
                $scope.error = "wrong credential";

        };

Which will store the cookie 'isLogin' when the login is successful.

And when the state is changed in app.js for $stateChangeStart function:

$rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) {
            if (toState && toState.secure) {
                if($cookies.get('isLogin')){
                    //do nothing
                }else{
                    $state.go("login");
                    event.preventDefault();
                }
            }

            if(toState.url == '/login' && $cookies.get('isLogin')) {
                $state.go("home");
                event.preventDefault();
            }

        });

So here the cookie is checked.

I hope this works.!