AngularJS:用户身份验证后重新加载 ng-include (或解决问题的更好方法)

Question

我真的只是在学习 Angular，我正在尝试创建一个基于身份验证限制内容访问的应用程序。我的身份验证部分正在工作(也使用 Laravel PHP 框架)，但我在根据身份验证状态“重新加载”某些内容时遇到问题，即在成功身份验证之后。

最初，我想做的是在用户登录后更新主导航菜单。我确信有更好的方法，但到目前为止我所拥有的是从具有不同导航元素的服务器返回的 View 取决于用户是否登录，然后使用 ng-include 将其加载到元素中。

有一个登录选项，它将登录表单加载到 ng-view 中。用户登录后，我想用服务器的 View 刷新 ng-include 。

成功登录后是否可以在 ng-include 中重新加载该模板？

如果这是错误的方法，请随时推荐更好的技术来解决此问题。当然，这在 jQuery 中很容易做到，但我更喜欢用 Angular 的方式来做事。

这是迄今为止我的一些代码:

index.html:

<div class="container" ng-controller="appController">

    <div id="nav" ng-include src="menuUrl()"></div>

    <div class="row">
        <div class="span3" ng-include src="'partials/brands.html'" ng-controller="brandController"></div>
        <div class="span9" ng-view></div>
    </div>

</div>

一些 Controller :

.controller('appController', function($scope){
    $scope.loggedIn = false;

    $scope.menuUrl = function() {
        return "partials/nav.html";
    };

})
.controller('loginController',function($scope, $sanitize, $location, Authenticate, Flash){
    $scope.login = function(){
        Authenticate.save({
            'email': $sanitize($scope.email),
            'password': $sanitize($scope.password)
        },function() {
            $location.path('/products')
            Flash.clear()
            sessionStorage.authenticated = true;
        },function(response){
            Flash.show(response.flash)
        })
    }
})
.controller('logoutController',function($scope, $location, Authenticate, Flash){
    $scope.logout = function (){
        Authenticate.get({},function(response){
            delete sessionStorage.authenticated
            Flash.show(response.flash)
            $location.path('/login')
        })
    }
})

服务:

.factory('Authenticate', function($resource){
    return $resource("/service/authenticate/")
})
.factory('Flash', function($rootScope){
    return {
        show: function(message){
            $rootScope.flash = message
        },
        clear: function(){
            $rootScope.flash = ""
        }
    }
})

应用程序:

 .config(['$routeProvider',function($routeProvider){
        $routeProvider.when('/', {
            templateUrl: 'partials/home.html', 
            controller: 'homeController'
        })

        $routeProvider.when('/login', {
            templateUrl: 'partials/login.html', 
            controller: 'loginController'
        })

        $routeProvider.when('/logout', {
            templateUrl: 'partials/logout.html', 
            controller: 'logoutController'
        })

        $routeProvider.otherwise({redirectTo :'/'})
    }])
    .config(function($httpProvider){

        var interceptor = function($rootScope,$location,$q,Flash){

        var success = function(response){
            return response
        }

        var error = function(response){
            if (response.status == 401){
                delete sessionStorage.authenticated
                $location.path('/')
                Flash.show(response.data.flash)

            }
            return $q.reject(response)

        }
            return function(promise){
                return promise.then(success, error)
            }
        }
        $httpProvider.responseInterceptors.push(interceptor)
    })
    .run(function($http,CSRF_TOKEN){
        $http.defaults.headers.common['csrf_token'] = CSRF_TOKEN;
    })

Laravel View :

<ul class="nav nav-tabs">
  <li><a href="#/">Home...</a></li>
  @if(!Auth::check())
  <li><a href="#/login">Log-in</a></li>
  @else
  <li><a href="#/logout">Log-out</a></li>
  @endif
  <li><input name="search" id="search" type="search" placeholder="Search products..." />
</ul>

Answer 1

当用户使用广播方法在根作用域上成功登录时，您可以首先引发事件

$rootScope.$broadcast('userLoggedIn',{user:user});

在appController上，您可以订阅该事件

$scope.$on("userLoggedIn",function(event,args) {
     $scope.menuUrl=null;
     $scope.menuUrl="partials/nav.html";
});

这也意味着将 menuUrl 更改为 Controller 和 html 绑定(bind)中的属性。

另外，如果您可以为登录用户和匿名用户定义多个服务器 View ，那么您只需在用户登录时翻转 View 即可。