2015-08-08 17 views
7

Tôi đang cố gắng tạo SPA ở nơi bạn phải đăng nhập để truy cập gần như mọi thứ. Vì vậy, một cách tự nhiên, màn hình mặc định mà bạn nhìn thấy là màn hình đăng nhập. Tuy nhiên, sau khi người dùng đã đăng nhập, bất kể ui-sref là gì, ui-router sẽ chuyển hướng đến trang đăng nhập (ngay cả khi người dùng được xác thực). Đây là mã ui-router của tôi:

(function() { 
 
'use strict'; 
 
angular 
 
    .module('app', ['ui.router', 'satellizer']) 
 
    .config(function ($stateProvider, $urlRouterProvider, $authProvider, $httpProvider, $provide) { 
 
    
 
     $httpProvider.interceptors.push(['$q', '$injector', function($q, $injector){ 
 
      return { 
 
       responseError: function (rejection) { 
 
        var $state = $injector.get('$state'); 
 
        var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid']; 
 
        angular.forEach(rejectionReasons, function (value, key) { 
 
         if (rejection.data.error === value) { 
 
          localStorage.removeItem('user'); 
 
          $state.go('auth'); 
 
         } 
 
        }); 
 

 
        return $q.reject(rejection); 
 
       }, 
 
       response: function(response) { 
 
        var authorization = response.headers('authorization'); 
 
        if(authorization !== null) { 
 
         authorization = authorization.substr(7).trim(); 
 
         //console.log(authorization); 
 
         var $auth = $injector.get('$auth'); 
 
         $auth.setToken(authorization); 
 
        } 
 
        return response; 
 
       } 
 
      } 
 
     }]); 
 

 
     $authProvider.loginUrl = 'mingdaograder/api/authenticate'; 
 

 
     $stateProvider 
 
      .state('users', { 
 
       url: '/users', 
 
       templateUrl: 'views/userView.html', 
 
       controller: 'UserController as user' 
 
      }) 
 
      .state('subjects', { 
 
       url: '/users/:user_id/subjects', 
 
       templateUrl: 'views/subjectsView.html', 
 
       controller: 'SubjectsCtrl as subjectsCtrl' 
 
      }) 
 
      .state('subject', { 
 
       url: '/users/:user_id/subjects/:subject_id', 
 
       templateUrl: 'views/subjectView.html', 
 
       controller: 'SubjectCtrl as subjectCtrl' 
 
      }) 
 
      .state('auth', { 
 
       url: '/auth', 
 
       templateUrl: 'views/authView.html', 
 
       controller: 'AuthController as auth' 
 
      }); 
 
      //.state('otherwise', { 
 
      // url: '*path', 
 
      // templateUrl: 'views/authView.html', 
 
      // controller: 'AuthController as auth' 
 
      //}); 
 

 
      //$urlRouterProvider.otherwise('/auth'); 
 
      $urlRouterProvider.otherwise(function($injector, $location) { 
 
       console.log("Could not find " + $location); 
 
       $location.path('/auth'); 
 
      }); 
 
    }) 
 
    .run(function ($rootScope, $state, $log) { 
 
     $rootScope.$on('$stateChangeStart', function (event, toState) { 
 
       console.log(toState.name); 
 
      var user = JSON.parse(localStorage.getItem('user')); 
 
      if (user) { 
 
       $rootScope.authenticated = true; 
 
       $rootScope.currentUser = user; 
 
      } 
 
     } 
 
     ); 
 
    } 
 
); 
 
})();

Bất cứ lúc nào tôi cố gắng sử dụng $ state.go (bất kỳ tên nhà nước ở đây) hoặc thậm chí gõ địa chỉ vào thanh địa chỉ, tôi luôn được chuyển hướng đến trạng thái xác thực. Trên bảng điều khiển, thông báo là "Không thể tìm thấy http://localhost/#/" cho mỗi tuyến đường duy nhất. Tôi có thể nhập http://localhost/#/users/5/subjects và tôi nhận được cùng một thông báo.

Dưới đây là một trong các bộ điều khiển của tôi làm một chuyển hướng:

(function() { 
 
    'use strict'; 
 

 
    angular 
 
     .module('app') 
 
     .controller('AuthController', AuthController); 
 

 
    function AuthController($auth, $state, $http, $rootScope, $log) { 
 
     var vm = this; 
 

 
     vm.loginError = false; 
 
     vm.loginErrorText; 
 

 
     vm.login = function() { 
 
      var credentials = { 
 
       username: vm.username, 
 
       password: vm.password 
 
      }; 
 

 
      $auth.login(credentials).then(function() { 
 
       return $http.get('api/authenticate/user'); 
 
      }, function (error) { 
 
       vm.loginError = true; 
 
       vm.loginErrorText = error.data.error; 
 
      }).then(function (response) { 
 
       var user = JSON.stringify(response.data.user); 
 
       localStorage.setItem('user', user); 
 
       $rootScope.authenticated = true; 
 
       $rootScope.currentUser = response.data.user; 
 

 
       //$log.info('From AuthCtrl: ' + $rootScope.currentUser.id); 
 
       $state.go('subjects', {user_id:$rootScope.currentUser.id}); 
 
      }); 
 
     } 
 
    } 
 
})();

Bất kỳ ý tưởng những gì tôi đang làm sai? Cảm ơn rất nhiều thời gian của bạn.

Cập nhật: Ok, tôi chưa tìm được cách khắc phục nhưng tôi nghĩ rằng tôi có thể đã tìm thấy nguyên nhân có thể xảy ra. Dường như chỉ xảy ra với các tuyến đường có thông số. Ví dụ: nếu tôi chuyển đến trạng thái người dùng, có đường dẫn/người dùng, không có chuyển hướng. Tuy nhiên, nếu tôi chuyển đến trạng thái trạng thái, có đường dẫn/người dùng /: user_id/chủ đề, nó sẽ chuyển hướng. Nó giống như dịch vụ kết hợp Url không thể nhận ra rằng/người dùng/5/đối tượng phù hợp/người dùng /: user_id/đối tượng, do đó, chuyển hướng. Bất kỳ ý tưởng làm thế nào để làm việc xung quanh này?

+0

khác cần phải được * cuối cùng * tuyên bố trong chuỗi, kể từ khi trận đấu chấp nhận được đầu tiên sẽ được chọn. – Claies

+0

bạn có sử dụng 'ui-view' và trạng thái' abstract' không? –

+0

@guarav bhavsar Có, tôi sử dụng ui-view trong HTML.Tôi có cần một trạng thái trừu tượng không? Tôi khá mới với angular và angular-ui-router. –

Trả lời

1

Đường dẫn đầu tiên được nhận dạng sẽ được chọn làm vị trí hiện tại. Điều này có nghĩa là thứ tự các định nghĩa tuyến đường của bạn là quan trọng. Trong trường hợp của bạn, bạn chỉ có một định nghĩa tuyến đường duy nhất là otherwise và vì tất cả các tuyến đường đều khớp với trang đăng nhập của bạn, bỏ qua mọi định nghĩa tuyến đường khác mà bạn có thể có, bao gồm tất cả các định nghĩa trạng thái stateProvider của bạn.

Một cách để sửa lỗi này là để loại bỏ các định nghĩa urlRouterProvider tuyến đường hoàn toàn và thay vào đó sử dụng cú pháp *path cung cấp bởi ui-router để tạo ra một otherwise nhà nước thay thế (mà phải được xác định cuối cùng vì những lý do tương tự như ở trên).

Do đó mã của bạn có thể trông như thế này:

$stateProvider 
    .state('auth', { 
     url: '/auth', 
     templateUrl: 'views/authView.html', 
     controller: 'AuthController as auth' 
    }) 
    .state('users', { 
     url: '/users', 
     templateUrl: 'views/userView.html', 
     controller: 'UserController as user' 
    }) 
    .state('subjects', { 
     url: '/users/:user_id/subjects', 
     templateUrl: 'views/subjectsView.html', 
     controller: 'SubjectsCtrl as subjectsCtrl' 
    }) 
    .state('subject', { 
     url: '/users/:user_id/subjects/:subject_id', 
     templateUrl: 'views/subjectView.html', 
     controller: 'SubjectCtrl as subjectCtrl' 
    }) 
    .state("otherwise", { 
     url: "*path", 
     templateUrl: 'views/authView.html', 
     controller: 'AuthController as auth' 
    }); 
+0

Điều này không đúng. Trong một trong các ứng dụng của tôi, tôi tuyên bố tuyến đường "khác" trước Một vài lý do cho điều này: 1) Lưu ý rằng bạn đang sử dụng hai đối tượng khác nhau ($ stateProvider và $ urlProvider), bạn không thêm hoặc xóa khỏi hệ thống phân cấp nhà nước khi bạn đăng ký " nếu không "tuyến đường. 2) Trạng thái Bộ định tuyến UI có thể được đăng ký theo bất kỳ thứ tự nào. Điều này là để bạn có thể đặt các định nghĩa trạng thái trong các mô-đun góc. –

+0

Xin lỗi, tôi đã thử điều này và nó không thay đổi bất cứ điều gì. Nó vẫn đang chuyển hướng chính xác như trước đây. Bất kỳ ý tưởng nào khác? –

+0

@biofractal - Đã thử thêm mã đường dẫn *. Nó vẫn đang chuyển hướng mọi thứ nhưng bây giờ thay vì có/#/auth trong thanh địa chỉ nó chỉ có/#/ –

9

tôi thấy tôi không có một '/' vào đầu url trạng thái ban đầu của tôi. Mỗi khi tôi điều hướng đến trạng thái, '/' bị thiếu dường như đẩy nó vào trạng thái stateProvider.otherwise.

state1: 'opportunity' 
state1Url : '/opportunity/' <== added initial forward slash to make it work. 

state2: 'opportunity.create' 
state2Url : 'create/' 
+1

giải thích đơn giản và rõ ràng;) +1 –

-1

(function() { 
 
'use strict'; 
 
angular 
 
    .module('app', ['ui.router', 'satellizer']) 
 
    .config(function ($stateProvider, $urlRouterProvider, $authProvider, $httpProvider, $provide) { 
 
    
 
     $httpProvider.interceptors.push(['$q', '$injector', function($q, $injector){ 
 
      return { 
 
       responseError: function (rejection) { 
 
        var $state = $injector.get('$state'); 
 
        var rejectionReasons = ['token_not_provided', 'token_expired', 'token_absent', 'token_invalid']; 
 
        angular.forEach(rejectionReasons, function (value, key) { 
 
         if (rejection.data.error === value) { 
 
          localStorage.removeItem('user'); 
 
          $state.go('auth'); 
 
         } 
 
        }); 
 

 
        return $q.reject(rejection); 
 
       }, 
 
       response: function(response) { 
 
        var authorization = response.headers('authorization'); 
 
        if(authorization !== null) { 
 
         authorization = authorization.substr(7).trim(); 
 
         //console.log(authorization); 
 
         var $auth = $injector.get('$auth'); 
 
         $auth.setToken(authorization); 
 
        } 
 
        return response; 
 
       } 
 
      } 
 
     }]); 
 

 
     $authProvider.loginUrl = 'mingdaograder/api/authenticate'; 
 

 
     $stateProvider 
 
      .state('users', { 
 
       url: '/users', 
 
       templateUrl: 'views/userView.html', 
 
       controller: 'UserController as user' 
 
      }) 
 
      .state('subjects', { 
 
       url: '/users/:user_id/subjects', 
 
       templateUrl: 'views/subjectsView.html', 
 
       controller: 'SubjectsCtrl as subjectsCtrl' 
 
      }) 
 
      .state('subject', { 
 
       url: '/users/:user_id/subjects/:subject_id', 
 
       templateUrl: 'views/subjectView.html', 
 
       controller: 'SubjectCtrl as subjectCtrl' 
 
      }) 
 
      .state('auth', { 
 
       url: '/auth', 
 
       templateUrl: 'views/authView.html', 
 
       controller: 'AuthController as auth' 
 
      }); 
 
      //.state('otherwise', { 
 
      // url: '*path', 
 
      // templateUrl: 'views/authView.html', 
 
      // controller: 'AuthController as auth' 
 
      //}); 
 

 
      //$urlRouterProvider.otherwise('/auth'); 
 
      $urlRouterProvider.otherwise(function($injector, $location) { 
 
       console.log("Could not find " + $location); 
 
       $location.path('/auth'); 
 
      }); 
 
    }) 
 
    .run(function ($rootScope, $state, $log) { 
 
     $rootScope.$on('$stateChangeStart', function (event, toState) { 
 
       console.log(toState.name); 
 
      var user = JSON.parse(localStorage.getItem('user')); 
 
      if (user) { 
 
       $rootScope.authenticated = true; 
 
       $rootScope.currentUser = user; 
 
      } 
 
     } 
 
     ); 
 
    } 
 
); 
 
})();

+4

Vui lòng cung cấp một số mô tả về mã của bạn và cách giải quyết câu hỏi của người đăng chỉ cần đăng một khối mã khổng lồ – Suever

Các vấn đề liên quan