2015-07-20 59 views
1

我正在使用Backbone.js進行非常基本的SPA。我的應用程序有幾條路線。其中有2個給我的問題:索引路由(「/#索引」)和菜單路由(「/#mainmenu」)。Backbone js防止在返回/轉發時更改URL哈希

我的應用程序中的一個簡單的工作流程如下:用戶填寫表單 - >點擊登錄 - >觸發ajax請求 - >如果登錄成功,轉到「/#mainmenu」路由。如果登錄失敗,請保持「/#index」路線。 如果用戶單擊註銷 - > ajax請求 - >如果註銷成功轉到「/#index」,則在「/#mainmenu」上。如果註銷失敗仍保留在「/#mainmenu」上。

,我掙扎的問題是:

  1. 一個乾淨的方式來觸發過渡到「/#MainMenu的」成功登錄後(我目前使用router.navigate(「MainMenu的」,{觸發:真});但閱讀應避免使用這種方法,在derrick貝利的文章https://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/
  2. 一個乾淨的方法,以防止用戶在瀏覽器中按「返回」按鈕時返回到「/#索引」從「/#mainmenu 「路線。我也想保留url散列以反映當前視圖。
  3. 防止用戶成功註銷後前往「/#mainmenu」。
  4. 甚至有可能在點擊瀏覽器後退/前進按鈕時防止URL哈希變化?

當我說「乾淨」時,我指的是「什麼是最佳實踐?」。我部分解決了一些問題,通過保存網址哈希值並恢復相應的哈希值(通過router.navigate(currentRoute,{replace:true});)但我覺得這是一個冒險的方法。

任何反饋是歡迎和非常感謝。

回答

0

解決此問題的一種方法是對執行實際回調路由之前需要進行身份驗證狀態檢查的路由應用異步before過濾器。

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

避免{trigger: true}的理念是基於這樣的事實,當路由器獲取與此標誌觸發,這條路整個初始化過程被觸發。您將失去之前定義的appstates的好處,因爲應用程序將不得不重新初始化所有內容,而這項工作之前已經完成。

在實踐中,我認爲評估你的網絡應用程序的實際功能是非常有用的。如果因爲要渲染的視圖是全新的,失去應用程序並不是問題,那麼我不會看到創建重新初始化應用程序的客戶端重定向的問題。
另一方面,如果您的應用程序有許多已經呈現的視圖,您希望它們保持與之前相同的狀態,則可以偵聽每個需要它的組件上的auth狀態事件,如果他們需要的話,相應地提供。

+0

感謝如何避免'{觸發:真}解釋',也爲您的反饋意見。 – bboydflo

0
  1. 我不認爲觸發路線有什麼問題,在2年內沒有發生任何問題。這一切都歸結爲您的要求,閱讀文章看起來像很多工作給我。

  2. 有多種方法可以做到這一點。首先,您可以使用window.history.forward()來禁用back/forward buttons。第二,我最喜歡的,是在Router#execute做加工。一個sample可能看起來像:

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

+0

感謝您的回答。我沒有想過直接使用歷史API。這似乎是一個好的和可靠的想法。我將嘗試這種方法。我工作的「hacky」解決方案與上面的示例代碼非常相似。但從我的經驗來看,按後退/前進將改變網址哈希值,並且必須手動調整它。我希望有更好的解決方案。感謝您的反饋意見。 – bboydflo