Javascript 带有无效URL段塞的余烬渲染404

为了便于阅读，我在应用程序中使用了动态URL。url结构是

/[：organization\u slug]/[：product\u slug]

。换句话说，

组织

是

产品

的所有者。为了安全起见，我想在某人在URL中键入不存在的组织时显示404。同样，在URL中输入不存在的产品时，显示404

我已经实现了如上所述的Ember 404。然后，我将连接到

afterModel

，查看查询是否返回了记录，如果没有，则尝试转换到

fourOhFour

路径。以下是我目前的相关代码：

router.js

Router.map(function() {
  this.route("fourOhFour", {path: "*path"});
  this.resource('organization', {path: ':organization_slug'}, function() {
    this.resource('product', {path: ':product_slug'});
  });
});

var OrganizationRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('organization', {slug: params.organization_slug});
  },
  afterModel: function(organization, transition) {
    if(organization.get('length') === 0) {
      //If it's not a correct URL render the 404
      this.transitionTo("fourOhFour");
    }
  },

  serialize: function(model) {
    return {organization_slug: model.get('slug')};
  }
});

export default OrganizationRoute;

var ProductRoute = Ember.Route.extend({
  model: function(params) {
    var self = this;
    // Verify that the product belongs to the organization in the URL
    return this.store.find('organization', {slug: Ember.organizationSlug}).then(function(organization) {
      var organizationID = organization.get('firstObject.id');
      return self.store.find('product', {slug: params.product_slug, organization: organizationID});
    });
  },
  afterModel: function(product) {
    if(product.get('length') === 0) {
      this.transitionTo("fourOhFour");
    }
  },
  serialize: function(model) {
    return {product_slug: model.get('slug')};
  }
});

export default ProductRoute;

routes/organization.js

Router.map(function() {
  this.route("fourOhFour", {path: "*path"});
  this.resource('organization', {path: ':organization_slug'}, function() {
    this.resource('product', {path: ':product_slug'});
  });
});

var OrganizationRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('organization', {slug: params.organization_slug});
  },
  afterModel: function(organization, transition) {
    if(organization.get('length') === 0) {
      //If it's not a correct URL render the 404
      this.transitionTo("fourOhFour");
    }
  },

  serialize: function(model) {
    return {organization_slug: model.get('slug')};
  }
});

export default OrganizationRoute;

var ProductRoute = Ember.Route.extend({
  model: function(params) {
    var self = this;
    // Verify that the product belongs to the organization in the URL
    return this.store.find('organization', {slug: Ember.organizationSlug}).then(function(organization) {
      var organizationID = organization.get('firstObject.id');
      return self.store.find('product', {slug: params.product_slug, organization: organizationID});
    });
  },
  afterModel: function(product) {
    if(product.get('length') === 0) {
      this.transitionTo("fourOhFour");
    }
  },
  serialize: function(model) {
    return {product_slug: model.get('slug')};
  }
});

export default ProductRoute;

routes/product.js

Router.map(function() {
  this.route("fourOhFour", {path: "*path"});
  this.resource('organization', {path: ':organization_slug'}, function() {
    this.resource('product', {path: ':product_slug'});
  });
});

var OrganizationRoute = Ember.Route.extend({
  model: function(params) {
    return this.store.find('organization', {slug: params.organization_slug});
  },
  afterModel: function(organization, transition) {
    if(organization.get('length') === 0) {
      //If it's not a correct URL render the 404
      this.transitionTo("fourOhFour");
    }
  },

  serialize: function(model) {
    return {organization_slug: model.get('slug')};
  }
});

export default OrganizationRoute;

var ProductRoute = Ember.Route.extend({
  model: function(params) {
    var self = this;
    // Verify that the product belongs to the organization in the URL
    return this.store.find('organization', {slug: Ember.organizationSlug}).then(function(organization) {
      var organizationID = organization.get('firstObject.id');
      return self.store.find('product', {slug: params.product_slug, organization: organizationID});
    });
  },
  afterModel: function(product) {
    if(product.get('length') === 0) {
      this.transitionTo("fourOhFour");
    }
  },
  serialize: function(model) {
    return {product_slug: model.get('slug')};
  }
});

export default ProductRoute;

问题是过渡没有启动。管线未激活，且未呈现模板。我认为这与由于动态URL的性质而存在路由这一事实有关。但是，我想维护URL路径，但显示404模板，该模板工作不正常。如果我将404路由的

路径

更改为类似

/404

的静态字符串，则转换将起作用。但是，如果可能的话，我希望保留原始请求的URL路径

这样，如果有人请求一条实际上不存在的路由（即

/foo/bar/baz

），它将看起来与路由有效但记录不存在的页面相同。谁能给我指出正确的方向吗

---

提前谢谢

我认为您的问题是，当您试图过渡到“一网打尽”时，Ember.js不知道这是什么。这很容易修复，因为

transitiono（）

使用第二个参数来指定模型，在您的情况下，该参数就是URL

因此，对于一个不存在的产品，您的路线如下所示：

App.BadRoute = Ember.Route.extend({
  model: function(){
    return "abcdproduct";
  },
  afterModel: function(badProduct){
    this.transitionTo('notFound', badProduct);
  }
});

---

查看基本工作示例

谢谢您的帮助！我需要的是第二个参数。我稍微修改了你的回答，以适应我的特殊情况。