4.12 Routing -- Preventing And Retrying Transitions

一、概述

在一个路由的跳转过程中，Ember路由器传递一个跳转对象到被跳转调用的路由的不同的hooks中。任何一个hook获取这个跳转对象，有能力通过调用transition.abort()终止跳转，并且如果跳转对象被储存，它可以通过调用transition.retry()稍后被尝试。

二、Preventing transitions via willTransition

1. 当尝试一个跳转时，不管是通过{{link-to}}, transitionTo，或者一个URL改变，一个willTransition action被激活到当前活动的路由。从leaf-most路由开始，这给了每一个活动的路由机会去决定是否跳转应该发生。


2. 假设你的app在一个路由上，它显示复杂的表格让用户填写并且用户不小心导航后退。除非跳转被阻止，否则用户可能丢失在表格中所有的数据，这是一个令人非常沮丧的用户体验。

这里有一种方法可以处理：

app/routes/form/js

export default Ember.Route.extend({
  actions: {
    willTransition(transition) {
      if (this.controller.get('userHasEnteredData') &&
          !confirm("Are you sure you want to abandon progress?")) {
        transition.abort();
      } else {
        // Bubble the `willTransition` action so that
        // parent routes can decide whether or not to abort.
        return true;
      }
    }
  }
});

• 当用户点击一个{{link-to}}辅助器，或者当app通过transitonTo开始一个跳转，这个跳转将会被终止并且URL将会保持不变。
• 然而，如果浏览器的后退按钮被用来导航离开route:form，或者如果用户手动改变URL，新的URL将会在willTransition action被调用之前被导航到。则将导致浏览器查看新的URL，尽管willTransition调用了transition.abotr()。

三、Aborting transitions within model，beforeModel，afterModel

model，beforeModel和afterModel hooks每一个通过一个跳转对象被调用。这使得有可能为目标路由终止尝试的跳转。

app/routes/disco.js

export default Ember.Route.extend({
  beforeModel(transition) {
    if (new Date() > new Date("January 1, 1980")) {
      alert("Sorry, you need a time machine to enter this route.");
      transition.abort();
    }
  }
});

四、Storing And Retrying A Transition

被终止的路由可以在稍后被重新尝试。一个通常的用例是授权路由重定向到用户登录页面，并且一旦他们已经登录然后重定向他们回到授权路由。

app/routes/some-authenticated.js

export default Ember.Route.extend({
  beforeModel(transition) {
    if (!this.controllerFor('auth').get('userIsLoggedIn')) {
      var loginController = this.controllerFor('login');
      loginController.set('previousTransition', transition);
      this.transitionTo('login');
    }
  }
});

app/controllers/login.js

export default Ember.Controller.extend({
  actions: {
    login() {
      // Log the user in, then reattempt previous transition if it exists.
      var previousTransition = this.get('previousTransition');
      if (previousTransition) {
        this.set('previousTransition', null);
        previousTransition.retry();
      } else {
        // Default back to homepage
        this.transitionToRoute('index');
      }
    }
  }
});