Javascript angular.js：根据登录状态动态导航

我使用athentication进行了以下路由，这是通过PHP脚本和MySQL完成的：

app.config

authCtrl

现在我想根据登录状态更改导航。如果用户已登录，则应显示一个注销按钮和指向仪表板的链接。如果用户未登录，则应如下所示

未登录用户的示例

---

创建导航的最佳方式是什么？它应该是一个单独的模板吗？

当事情变得复杂时，我宁愿使用或者可能还没有尝试过这个模板，因为它们支持同一页面中的多个视图。因此nav变成了它自己的视图，内容变成了它自己的视图，等等。为了在视图之间进行通信，我将使用$rootScope或某种共享状态服务中的数据传递消息

所以像这样的事情。。。开始时，登录共享状态设置为注销。作为登录功能的最后一部分，我将设置登录共享状态并将其设置为登录。正如我所说，我宁愿将其作为共享状态服务调用，因为我可以让它同时执行$rootScope.$广播某种onLoginStateChange并将新值传递到那里

---

然后，我将设置我的nav视图，使用$scope.$on监听这个onLoginStateChange，并在其控制器中设置其内部视图模型状态，并将其绑定到ng if指令，以便登录时显示Login if false，登录时显示Logout if true。

在使用ui路由器时，您可以编写一个代码示例吗？我想我必须使用ui路由器。。。

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

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>