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

现在我想根据登录状态更改导航。如果用户已登录，则应该有一个logOUT-Button和一个指向仪表板的链接。如果用户未登录，则应该如下所示

未登记用户的样本

 <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指令因此，如果错误，则会显示登录;如果 true （已登录），则会显示退出。

angular.js：动态导航取决于登录状态

1 个答案: