J'essaie de mettre en œuvre l'autorisation sur mon application angulaire. Lorsqu'un itinéraire est modifié, je souhaite vérifier si l'itinéraire est autorisé ou non pour l'utilisateur. J'ai essayé avec $routeChangeStart
mais cela n'empêche pas l'événement.
Mon code actuel:
$scope.$on('$routeChangeStart', function(event, next, current) {
if(current_user.is_logged_in){
var route_object = next.route_object;
if(!(route_object.route_roles)){
event.preventDefault();
}
}
});
Ici, dans mon objet next
, j'obtiens route_object qui est défini dans mon $routeProvider
var routes = object;
app.config(function($routeProvider) {
$routeProvider.when(url, {
templateUrl: "/users.html",
route_object: routes,
});
});
routes
est un objet qui est formé dans ma fonction, mais lorsque j'utilise $locationChangeStart
, les URL de la page suivante et de la page précédente s'affichent
Comment obtenir l'objet route entier?
Vous pouvez obtenir le paramètre route dans un écouteur d'événement $locationChangeStart
comme ceci:
$scope.$on('$locationChangeStart', function(event, next, current) {
if(current_user.is_logged_in){
var route_object = ($route.routes[$location.path()]).route_object; //This is how you get it
if(!(route_object.route_roles)){
event.preventDefault();
}
}
});
Ensuite, la méthode preventDefault classique ferait le travail. Voici un plunker que j'ai écrit pour quelque chose de similaire.
$routeProvider
.when('/', {
title: 'Home',
templateUrl: 'partials/home',
controller: 'HomeController',
access: {
isFree: true
}
})
.when('/about-us', {
title: 'About us',
templateUrl: 'partials/aboutus',
controller: 'AboutUsController',
access: {
isFree: true
}
})
.when('/how-it-works', {
title: 'How It Works',
templateUrl: 'partials/howitworks',
controller: 'HowItWorksController',
access: {
isFree: true
}
})
.when('/login', {
templateUrl: 'users/login',
controller: 'LoginController',
access: {
isFree: true
}
})
.when('/logout', {
controller: 'LogoutController',
access: {
isFree: false
}
})
.when('/sign-up', {
templateUrl: 'users/signup',
controller: 'SignUpController',
access: {
isFree: true
}
})
.otherwise({
redirectTo: '/'
});
})
.run(['$rootScope', '$location','$log','$window','Auth' ,function($rootScope, $location, $log, $window, Auth) {
$rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){
$rootScope.title = '';
if(currRoute.$$route.title !== undefined){
$rootScope.title = currRoute.$$route.title ;
}
// $rootScope.userLoggedIn = {name : 'Hi, '+ 'Amar'}
let checkIsLoggedInForRoute = ['/login','/sign-up'];
let isFreeAccess = currRoute.$$route.access.isFree;
let isLoggedIn = Auth.isLogin();
if(isFreeAccess){
if(checkIsLoggedInForRoute.indexOf($location.path()) !== -1 && isLoggedIn){
event.preventDefault();
$location.path('/')
}
}else if(!isFreeAccess){
let isLogoutRoute = currRoute.$$route.originalPath.indexOf('/logout') !== -1;
if(isLogoutRoute && isLoggedIn){
Auth.logout();
$location.path('/');
}else if(isLogoutRoute && !isLoggedIn){
$location.path('/login');
}
}
});
}]);
Que contient la prochaine route. $$?
Il devrait y avoir un prochain. $$ route.route_object
Vous pouvez également utiliser le fournisseur $ location pour faire ceci comme:
.run(['$rootScope','$location',function($rootScope,$location){
$rootScope.$on('$routeChangeStart', function(event,next, current) {
console.log('next',next);
console.log('location',$location.path());
console.log('location',$location.search()); // for route params
});
}])`