当用户未登录或尝试使用angularjs从URL直接访问页面时重定向到登录 [英] Redirect to login when user is not logged in or user tries to access page directly from URL using angularjs

问题描述

我正在创建一个小项目，如果用户角色是销售，则在登录后它将把用户重定向到销售表单页面. 现在，如果用户尝试通过在URL中输入Sales form页面的路径来尝试访问Sales form页面，并且用户也没有登录，该如何将用户重定向到登录页面.这是我的Angular部分.

I am creating a small project in which if user role is Sales then after login it will redirect user to sales form page. Now how can I redirect user to Login page if user tries to access Sales form page by entering its path in URL and also user is not logged in.This is my Angular part.

app.controller('LoginCtrl',function($scope,$http,$window){

    $scope.login = function(){            
           data={
                email:$scope.email,
                pwd:$scope.pwd
            }
            $http.post("widget/login.php",data).success(function(data){
                 console.log(data);
            if(!data.success){                     
                    $scope.errorMsg="username or password is incorrect"; 
            }
            else{                                                
                $scope.role=data.role;
                $scope.id=data.id;
                if(data.role == "admin"){
                    $window.location.href="AdminPage.html";
                }
                else if(data.role == "Sales"){
                    $window.location.href="sales_form.html";
                }
                else if(data.role == "Account"){
                    $window.location.href="account_form.html";
                }
                else if(data.role == "Technical"){
                    $window.location.href="Technical_Form.html";
                } 
                else{
                    $scope.errorMsg="username or password is incorrect";
                }   
            }

        });
    }

});

由此，如果用户未登录或尝试直接从URL访问页面，如何将用户重定向到登录页面. 还有另一件事，我正在使用PHP作为后端，如您在$http.post部分中所见，因此请给出相应的答案.感谢您的帮助，并先谢谢您.

From this how can I redirect user to login page if user is not logged in or tries to access page directly from URL. And One more thing I'm using PHP as Backend as you can see it in $http.post part so give your answer accordingly.Appreciate help and Thank you in advance.

推荐答案

1. 在以下位置使用angular.js，angular-route.js，angular-cookies.js和app.js 索引页如下:

1. Use angular.js,angular-route.js, angular-cookies.js and app.js on index page as follows:

 <script src="//code.angularjs.org/1.2.20/angular.js"></script>
 <script src="//code.angularjs.org/1.2.20/angular-route.js"></script>
 <script src="//code.angularjs.org/1.2.13/angular-cookies.js"></script>
 <script src="app.js"></script>

在app.js中

In app.js

    var app = angular.module('app', ['ngRoute', 'ngCookies']);
   app.config(config);
   app.run(run);

config.$inject = ['$httpProvider','$routeProvider', 
'$locationProvider'];
function config($httpProvider, $routeProvider, $locationProvider) {       
 //Set routing
$routeProvider
    .when('/login', {
        controller: 'LoginController',
        templateUrl: 'login/login.view.html',
        controllerAs: 'vm'
    })
      .otherwise({ redirectTo: '/login' });
   }

   //Write following code to make user login after page refresh
        run.$inject = ['$rootScope', '$location', '$cookieStore'];
  function run($rootScope, $location, $cookieStore, $http, chatService) 
  {
   // keep user logged in after page refresh
  $rootScope.globals = $cookieStore.get('globals') || {};
if ($rootScope.globals.currentUser) {           
   // set token in request header
  // $http.defaults.headers.common['Authorization'] = 
     $rootScope.globals.currentUser.authdata; 

}

  //On location change redirect user to login page if not login else 
 redirect based on role
  $rootScope.$on('$locationChangeStart', function (event, next, current) 
 {
    // redirect to login page if not logged in and trying to access a 
 restricted page
   //allow login and register page for all(login/notlogin) user
    var restrictedPage = $.inArray($location.path(), ['/login', 
 '/register']) === -1;
    var loggedIn = $rootScope.globals.currentUser;
    if (restrictedPage && !loggedIn) {
        $location.path('/login');
    }
    else{
    $scope.role=$rootScope.globals.currentUser.user.role;               
        if(data.role == "admin"){
            $window.location.href="AdminPage.html";
        }
        else if(data.role == "Sales"){
            $window.location.href="sales_form.html";
        }
        else if(data.role == "Account"){
            $window.location.href="account_form.html";
        }
        else if(data.role == "Technical"){
            $window.location.href="Technical_Form.html";
        } 
        else{
            $scope.errorMsg="username or password is incorrect";
        }   
   }
});
}

1. 在登录控制中编写以下代码

1. In login-Control write following code

  app.controller('LoginCtrl',function($scope,$http,$window){
  $scope.login = function(){            
  data={
    email:$scope.email,
    pwd:$scope.pwd
   }
   $http.post("widget/login.php",data).success(function(data){                
if(!data.success){                     
        $scope.errorMsg="username or password is incorrect"; 
}
else{ 
   //Set cookie
    $rootScope.globals = {
      currentUser: {
         user: data                   
    }                    

$cookieStore.put('globals', $rootScope.globals);
 //Redirect url
 $window.location.href="/";            
}
});

这篇关于当用户未登录或尝试使用angularjs从URL直接访问页面时重定向到登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！