Angular UI路由器如何重定向深层链接？

Question

我是 Angular UI 路由器的新手，我正在尝试了解如何防止用户使用已保存的超链接跳转到我的应用程序中间。我总是希望所有收藏夹或以其他方式记忆的链接在它们最初来到该站点时都被强制运行代码运行。但是，我不想阻止用户通过应用程序菜单和选项卡进入该状态。

在代码方面，我想做的是在下面的状态树中强制将“/feature1/subfeature1”链接到“/”，但前提是该链接来自用户记忆的某个链接。

$stateProvider
.state('main', {
  url: "/",
  templateUrl: "partials/main.html"
})
.state('feature1', {
  url: "/feature1",
  templateUrl: "partials/feature1.html"
})
.state('feature1.subfeature1', {
  url: "/feature1/subfeature1",
  templateUrl: "partials/feature1.subfeature1.html",
  controller: ......
  }
})

Angular UI 路由器常见问题解答中有关于防止用户达到状态的部分，但是当我运行示例时，会为所有 stateChangeStart 事件调用事件处理程序，包括通过 $state.go() 在应用程序内进行的合法导航。我希望区分检测跳转到应用程序中间的超链接和 $state.go()，因为我只使用 $state.go() 来导航状态。代码方面，我认为想做类似下面代码的事情。但是，不知道“这里需要测试”的代码是什么。

 app.run(function($rootScope, $state,) {
   $rootScope.$on('$stateChangeStart', function(e, to) {

    var isDeepLink =  NEED TEST HERE 

    if (isDeepLink ) {
      e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
     $state.go("\");
    }
}
});

有什么想法吗？

谢谢，

杰瑞

Answer 1

如何创建一个服务来注册应用程序是否已初始化。在本例中，我将“应用程序已初始化”定义为“已调用根状态的控制器”。

app.service("appInit", function() { 
    var done = false;
    return { 
        isDone: function() { return isinitialized; },  
        initDone: function() { isinitialized = true; }
    }
}

---

app.run(function($rootScope, $state, appInit) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
  if (!appInit.isDone()) {
    e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
    $state.go("\");
  }
}

---

$stateProvider
.state('main', {
  url: "/",
  templateUrl: "partials/main.html",
  controller: function(appInit) { appInit.initDone(); }
})

---

编辑：一个更简单的解决方案：

这种更简单的解决方案之所以有效，是因为从根状态 ("") 开始的唯一转换是在应用首次加载时的初始转换期间。

app.run(function($rootScope, $state, appInit) {
  $rootScope.$on('$stateChangeStart', function(e, to, toParams, from) {
  if (from.name === "" && to.name !=== "main") {
    e.preventDefault();
    // Optionally set option.notify to false if you don't want 
    // to retrigger another $stateChangeStart event
    $state.go("\");
  }
}

Answer 2

当它是一个深层链接时，$stateChangeStart 总是会触发 except。

因此，此代码将按您的要求执行，

app.run(function($rootScope, $state,) {
  $rootScope.$on('$stateChangeStart', function(e, to) {
     // code here runs if it is not a deep link
  });
  // code here runs if its a deep link
}