当用户未登录或用户尝试使用angularjs直接从URL访问页面时,重定向到登录

Question

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

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部分地看到它,所以请相应地给出你的答案.感谢帮助,并提前感谢你.

Answer 1

你应该使用angular routing而不是$ window.location.href.

让我告诉你使用ui-router.在加载角度库之后在index.html中添加这一行.

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

在你的app.js中

var routerApp = angular.module('routerApp', ['ui.router']);

routerApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        // HOME STATES AND NESTED VIEWS ========================================
        .state('login', {
            url: '/login',
            templateUrl: 'login.html',
            controller : 'LoginController'

        })

        // SALES PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('sales', {
            url: '/sales',
            templateUrl: 'sales_form.html',
            controller : 'SalesController'
            ......
            ......

        });
     });

现在在您的控制器中

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

    $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";  
                    $state.go('login');            

            }
            else{                                                
                $scope.role=data.role;
                $scope.id=data.id;
                if(data.role == "admin"){
                    $state.go('admin'); //add admin state as admin in ui-router like sales
                }
                else if(data.role == "Sales"){
                    $state.go('sales');
                }
               .....

                else{
                    $scope.errorMsg="username or password is incorrect";
                    $state.go('login'); 
                }   
            }

        });
      }
   });

Answer 2

1. 在索引页上使用 Angular.js、Angular-route.js、Angular-Cookies.js 和 App.js，如下所示：

    <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>
   

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

   3. 在登录控制中写入以下代码

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