Backbone js在后退/前进时阻止url哈希更改

时间:2015-07-20 09:36:30

标签: javascript backbone.js url-routing

我正在使用Backbone.js开发一个非常基本的SPA。我的应用程序路线很少。其中有2个给我提出问题:索引路线(" / #index")和菜单路线(" / #mainmenuu")。

我的应用中的简单工作流程如下:用户填写表单 - >点击登录 - >触发ajax请求 - >如果登录成功,请转到" / #mainmenu"路线。如果登录失败,请保持" / #index"路线。 On" /#mainmenu"如果用户点击退出 - > ajax请求 - >如果注销成功转到" / #index"。如果退出失败仍然在" / #mainmenmenu"。

我正在努力解决的问题是:

  1. 一种干净的方式来触发过渡到" /#mainmenu"成功登录后(我目前使用的是router.navigate(" mainmenu",{trigger:true});但请阅读derrick bailey的文章https://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/中应避免使用此方法
  2. 一种干净的方法来阻止用户返回" / #index"当从#34; / #mainmenu"中按下浏览器中的后退按钮时路线。我还想保留url hash以反映当前视图。
  3. 阻止用户前往" /#mainmenu"成功退出后。
  4. 当点击浏览器后退/前进按钮时,甚至可以防止更改网址哈希?
  5. 当我说"清洁"我指的是"最佳做法是什么?"。我通过保存url哈希并恢复适当的哈希部分解决了一些问题(通过router.navigate(currentRoute,{replace:true});)但我觉得这是一个hacky方法。

    欢迎任何反馈,非常感谢。

2 个答案:

答案 0 :(得分:0)

解决此问题的一种方法是在执行实际回调路由之前对需要进行身份验证状态检查的路由应用异步before过滤器。

例如: https://github.com/fantactuka/backbone-route-filter

避免{trigger: true}的理念是基于以下事实:当使用此标志触发路由器时,将触发该路由的整个初始化过程。您将失去以前定义的应用程序的好处,因为应用程序必须重新初始化所有内容,而此工作之前已完成。

在实践中,我认为评估您的网络应用实际上做了什么很有用。如果丢失appstate不是问题,因为您要呈现的视图是全新的,那么我没有看到创建重新初始化您的应用的客户端重定向的问题。
另一方面,如果您的应用程序有许多已经呈现的视图,您希望保持与之前相同的状态,则可以在需要它的每个组件上侦听auth状态事件,并仅使这些视图相应地重新呈现如果他们需要。

答案 1 :(得分:0)

  1. 我认为触发路线没有任何问题,2年多来没有任何问题。这一切都归结为你的要求,阅读这篇文章对我来说看起来很多工作。

  2. 有多种方法可以做到这一点。首先,您可以使用window.history.forward()停用back/forward buttons。其次,我最喜欢的是在Router#execute中进行处理。 sample可能如下所示:

  3. execute: function(callback, args, name) { if (!loggedIn) { goToLogin(); return false; //the privileged route won't trigger } if (callback) callback.apply(this, args); }