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。

只能从应用程序代码/链接访问AngularJS路由

1 个答案: