12

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

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

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

成功登录后，有没有办法在 ng-include 中重新加载该模板？

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

到目前为止，这是我的一些代码：

索引.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('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 视图：

<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>
4

2 回答 2

12

您可以从使用广播方法在 rootscope 上成功登录用户时引发事件开始

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

在appController您可以订阅甚至

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

这也意味着将 menuUrl 更改为控制器和 html 绑定中的属性。

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

于 2013-10-06T04:50:43.900 回答
9

@Chandermani 的答案几乎接近，事实上，您可以添加一些随机参数来强制刷新，就像这样：

app.controller('appController', function($scope){
   var getMenu = function(){
     var random = Math.random();
     return "partials/nav.html?r=" + random;
   }
   $scope.menuUrl = getMenu();
   $scope.$on('userLoggedIn', function(){
     $scope.menuUrl = getMenu();
   })
})
于 2014-03-29T19:18:46.097 回答