angularアプリケーションに認可を実装しようとしています。ルートが変更されたときに、そのルートがユーザーに認可されているかどうかを確認したいのですが。$routeChangeStart
イベントを妨げません。
私の現在のコード:
$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();
}
}
});
ここで私のnext
オブジェクトでは、$routeProvider
に設定されているroute_objectを取得しています
var routes = object;
app.config(function($routeProvider) {
$routeProvider.when(url, {
templateUrl: "/users.html",
route_object: routes,
});
});
routes
は関数内で形成されるオブジェクトですが、$locationChangeStart
を使用すると、次のページと前のページのURLが取得されるだけです。
ルートオブジェクト全体を取得するにはどうすればよいですか?
次のような$locationChangeStart
イベントリスナーでrouteパラメーターを取得できます。
$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();
}
}
});
その後、古典的なpreventDefaultメソッドが作業を行います。これが plunker で、私が似たようなもののために書いたものです。
$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');
}
}
});
}]);
Next。$$ routeには何が含まれていますか?
次があるはずです。$$ route.route_object
$ locationプロバイダーを使用して、次のようにすることもできます。
.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
});
}])`