我在应用程序中使用动态URL以便于阅读。网址结构为/[:organization_slug]/[:product_slug]
。换句话说,organization
是product
的所有者。出于安全考虑,当有人在URL中存在组织时,我希望显示404。同样,当不存在的产品存入URL时显示404。
我按照in this post所述实施了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'});
});
});
routes/organization.js
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;
routes/product.js
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路由的path
更改为静态字符串/404
,则转换有效。但是,如果可能,我希望保留原始请求的网址路径。
这样,如果有人请求实际上不存在的路线(即/foo/bar/baz
),它看起来与路线有效但路径相同的路径相同不存在。有人能指出我正确的方向吗?
提前致谢!
答案 0 :(得分:2)
我相信你的问题是,当你试图过渡到"赶上所有"时,Ember.js不知道那是什么。这很容易解决,因为transitionTo()
采用第二个参数来指定模型,在您的情况下,它将是URL。
因此,对于不存在的产品,您的路线应如下所示:
App.BadRoute = Ember.Route.extend({
model: function(){
return "abcdproduct";
},
afterModel: function(badProduct){
this.transitionTo('notFound', badProduct);
}
});
查看基本工作示例here