angular.js：動態導航取決於登錄狀態

Question

我有以下以及認證，這是通過PHP腳本和MySQL進行路由：

的app.config

app.config(['$routeProvider', 
    function ($routeProvider) { 
     $routeProvider. 
     when('/login', { 
      title: 'Login', 
      templateUrl: 'partials/login.html', 
      controller: 'authCtrl' 
     }) 
     .when('/logout', { 
      title: 'Logout', 
      templateUrl: 'partials/login.html', 
      controller: 'logoutCtrl' 
     }) 

     .when('/dashboard', { 
      title: 'Dashboard', 
      templateUrl: 'partials/dashboard.html', 
      controller: 'authCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/login' 
     }); 
    }]) 
    .run(function ($rootScope, $location, Data) { 
     $rootScope.$on("$routeChangeStart", function (event, next, current) { 
      $rootScope.authenticated = false; 
      Data.get('session').then(function (results) { 
       if (results.uid) { 
        $rootScope.authenticated = true; 
        $rootScope.uid = results.uid; 
        $rootScope.name = results.name; 
        $rootScope.email = results.email; 
       } else { 
        var nextUrl = next.$$route.originalPath; 
        if (nextUrl == '/signup' || nextUrl == '/login') { 

        } else { 
         $location.path("/login"); 
        } 
       } 
      }); 
     }); 
    }); 

authCtrl

app.controller('authCtrl', function ($scope, $rootScope, $routeParams, $location, $http, Data) { 
    $scope.login = {}; 
    $scope.signup = {}; 
    $scope.doLogin = function (customer) { 
     Data.post('login', { 
      customer: customer 
     }).then(function (results) { 
      Data.toast(results); 
      if (results.status == "success") { 
       $location.path('dashboard'); 
      } 
     }); 
    }; 
    $scope.logout = function() { 
     Data.get('logout').then(function (results) { 
      Data.toast(results); 
      $location.path('login'); 
     }); 
    } 
}); 

現在我想根據登錄狀態更改導航。如果用戶登錄，應該有一個登出按鈕和指向儀表板的鏈接。如果用戶沒有登錄它看起來應該是這樣

樣品未登錄用戶

<header id="navigation"> 
    <nav id="main"> 
     <ul> 
      <li id="login"><a href="#/login" class="btn"><i class="fa fa-power-off"></i> Login</a></li> 
     </ul> 
    </nav> 
</header> 
<main ng-view> 
    Content goes here 
</main> 

什麼是創建導航的最佳方式？它應該是一個單獨的模板？

Answer 1

當事情變得複雜時，我寧願使用ui-router或者角度新的路由器（還沒有嘗試過這個），因爲它們支持同一頁面中的多個視圖。因此，nav成爲它自己的視圖，呈現它自己的視圖等。爲了在視圖之間進行通信，我將使用消息傳遞與$rootScope中的數據或某種共享狀態服務。

所以像這樣......在開始時，登錄共享狀態設置爲註銷。作爲登錄功能的最後一部分，我將設置登錄共享狀態並將其設置爲登錄。就像我說的，我寧願把這個共享的州服務電話，因爲我可以讓它也做$rootScope.$broadcast某種onLoginStateChange並在那裏傳遞新值。

然後我建立了我的導航，瀏覽及使用$scope.$on聽這onLoginStateChange，並在其控制器設置它的內部視圖模型狀態，並結合，爲ng-if指令，這樣它會顯示登錄如果假，或註銷 if true（登錄）。