angular.js：根據登錄狀態進行動態導航

Question

我有以下通過Athentication進行的路由，這是通過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並將新值傳遞到那里。

然后我建立了我的導航，瀏覽及使用聽這onLoginStateChange $scope.$on ，並在其控制器設置它的內部視圖模型狀態，並結合，為ng-if指令所以它會如果是真的 ，如果錯誤顯示登錄 ，或退出 （登錄）。