Подтвердить что ты не робот

AngularJS: перезагрузить ng-include после аутентификации пользователя (или лучший способ решить проблему)

Я действительно изучаю Angular, и я пытаюсь создать приложение, которое ограничивает доступ к контенту на основе аутентификации. У меня есть часть проверки подлинности (также с использованием Laravel PHP framework), но у меня возникает проблема "перезагрузки" определенных частей контента на основе состояния auth, а именно после успешной аутентификации.

Вначале я пытаюсь обновить основное меню навигации после входа пользователя в систему. Я уверен, что есть лучший подход, но то, что я до сих пор, представляет собой представление, возвращенное с сервера с различными навигационными элементами в зависимости от того, вошел ли пользователь в систему или нет, а затем загрузите его в элемент с ng-include.

Имеется возможность входа в систему, которая загружает форму входа в ng-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('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>
4b9b3361

Ответ 1

Вы можете начать с поднятия события, когда пользовательский логин будет успешным на корнеплодах, используя широковещательный метод

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

На appController вы можете подписаться на четный

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

это также подразумевает, что измените ваш menuUrl на свойство в вашем контроллере и привязку html.

Alos, если вы можете определить несколько просмотров сервера для входа в систему и анонимного пользователя, вы можете просто перевернуть представление при входе пользователя.

Ответ 2

Ответ на

@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();
   })
})