只允许从应用程序代码/链接访问AngularJS路线

Question

我想创建一个只能从应用程序代码和链接访问的angularJs路线。主要想法是阻止用户在浏览器的地址栏中直接输入路由URL后访问该页面。 对于路由配置，我使用“ngRoute”模块的$ routeProvider。

我找不到这个问题的答案。我需要的东西可能吗？

在此先感谢。

Answer 1

你可以听$locationChangeStart事件。在你的路线，你可以设置一个参数（我把它叫做“限制”，但你可以把它任何你想要的）是这样的：

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/', { 
     controller: 'MainCtrl', 
     template: 'Allowed from anywhere.<br>Go to main <a href=\"#/main\">page</a>', 
     restricted: false 
    }) 
    .when('/main', { 
     controller: 'MainCtrl', 
     template: 'Allowed from anywhere.<br>Go to restricted <a href=\"#/restr\">page</a>', 
     restricted: false 
    }).when('/restr', { 
     controller: 'RestrictedPageCtrl', 
     template: 'Allowed only from main', 
     restricted: '/main' 
    }); 
}); 

如果是假的，这意味着没有限制，如果它被设置为路径，那么只能从该路径访问路线。你还可以用这个检查：

app.run(function($rootScope, $location, $route) { 
    $rootScope.$on('$locationChangeStart', function(event, next, current) { 
    var nextRoute = $route.routes[$location.path()]; 
    var currentPath = current.split('#')[1]; 
    if (nextRoute.restricted && nextRoute.restricted !== currentPath) { 
     $location.path('/'); 
     alert('You are trying to reach a restricted page!!!!'); 
    } 
    }); 
}); 

你可以改变的行为和用户重定向到另一个链接或防止位置变化与event.preventDefault();。

请注意，如果您在链接（html5Mode）中未使用＃标签（#），则应更改获取当前链接的方式。

这是plunker。