AngularJS: Recharger ng-après authentification de l'utilisateur (ou une meilleure façon de résoudre la question)
Je suis vraiment juste d'apprentissage Angulaire et je suis d'essayer de créer une application qui limite l'accès au contenu basé sur l'authentification. J'ai de la partie authentification de travail (également en utilisant le framework PHP Laravel), mais je vais avoir un problème de "rechargement" de certains morceaux de contenu basé sur auth statut, à savoir après une authentification réussie.
D'abord, ce que je suis en train de faire est de mettre à jour le menu de navigation principale lorsqu'un utilisateur se connecte. Je suis sûr qu'il y est une meilleure approche, mais ce que j'ai jusqu'à présent est un point de vue retourné par le serveur qui a différents éléments de navigation selon que l'utilisateur est connecté ou non, puis le charger dans un élément avec ng-include.
Il y a une option pour se connecter, ce qui charge un formulaire de connexion dans la ng-view. Après que l'utilisateur se connecte, je voudrais actualiser la ng-inclure avec la vue depuis le serveur.
Est-il un moyen de le recharger à ce modèle dans le ng-après une connexion réussie?
N'hésitez pas à recommander une meilleure technique pour la résolution de ce si c'est la mauvaise approche. Bien sûr, ce serait très facile de le faire en jQuery, mais je préfère faire les choses de la Angulaires.
Ici est une partie de mon code pour l'instant:
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>
Certains contrôleurs:
.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')
})
}
})
Services:
.factory('Authenticate', function($resource){
return $resource("/service/authenticate/")
})
.factory('Flash', function($rootScope){
return {
show: function(message){
$rootScope.flash = message
},
clear: function(){
$rootScope.flash = ""
}
}
})
Application:
.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 vue:
<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>
OriginalL'auteur Jazzy | 2013-10-05
Vous devez vous connecter pour publier un commentaire.
Vous pouvez commencer avec le fait d'élever un événement lors de la connexion de l'utilisateur est le succès sur le rootscope l'aide de la diffusion de la méthode
Sur le
appController
vous pouvez vous abonner à la mêmecela implique également que le changement de votre menuUrl à une propriété dans vous du contrôleur et du code html de liaison.
Alos, si vous pouvez définir plusieurs serveurs vues pour connecté et anonyme de l'utilisateur, vous pouvez ensuite il suffit de retourner la vue sur la connexion de l'utilisateur.
Bien que je pense que maintenant, null approche peut ne pas fonctionner comme vous l'avez mentionné que les partiels mis en cache. Ayant différents partiels serait mieux. Une autre façon, je pense, serait de générer le menu sur le côté client à l'aide de données json et un certain type de
ng-repeat
. Dans ce cas, fairenull
et la réaffectation partielle serait la cause de nouveau rendu de la vue qui en ferait la demande à nouveau pour les données json à partir du serveur.OriginalL'auteur Chandermani
@Chandermani 's réponse est presque proche, en fait, vous pouvez simplement ajouter un peu aléatoire params pour forcer l'actualisation, comme cela:
Qui était intelligent. merci !
Sauf qu'Il ne fonctionne pas si vous mettez vos modèles dans un modèle de cache
OriginalL'auteur Housne