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>
Ответы
Ответ 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();
})
})