Я действительно изучаю 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>