問題

我正在編寫一個具有登入檢視和主檢視的小型AngularJS應用程式,配置如下:

 $routeProvider
 .when('/main' , {templateUrl: 'partials/main.html',  controller: MainController})
 .when('/login', {templateUrl: 'partials/login.html', controller: LoginController})
 .otherwise({redirectTo: '/login'});
 

我的LoginController檢查使用者/傳遞組合並在$rootScope上設定屬性,反映如下:

 function LoginController($scope, $location, $rootScope) {
 $scope.attemptLogin = function() {
   if ( $scope.username == $scope.password ) { // test
        $rootScope.loggedUser = $scope.username;
        $location.path( "/main" );
    } else {
        $scope.loginError = "Invalid user/pass.";
    }
}
 

一切正常,但如果我訪問http://localhost/#/main我最終繞過登入螢幕.我想編寫類似“每當路由發生變化時,如果$rootScope.loggedUser為null然後重定向到/登入”

...

等等.我可以以某種方式聽路由更改嗎?我會發布這個問題並繼續看.

  最佳答案

在嘗試了一些文件和原始碼後,我想我讓它工作.也許這對其他人有用嗎?

我在模組配置中添加了以下內容:

 angular.module(...)
 .config( ['$routeProvider', function($routeProvider) {...}] )
 .run( function($rootScope, $location) {

    // register listener to watch route changes
    $rootScope.$on( "$routeChangeStart", function(event, next, current) {
      if ( $rootScope.loggedUser == null ) {
        // no logged user, we should be going to #login
        if ( next.templateUrl != "partials/login.html" ) {
          // not going to #login, we should redirect now
          $location.path( "/login" );
        }
      }         
    });
 })
 

一件似乎很奇怪的事情是我必須測試部分名稱(login.html),因為“下一個”路由物件沒有網址或其他東西.也許有更好的方法嗎?

  相同標籤的其他問題

angularjsngroute