如何在Vue Router中應用中間件

中間件是咱們在軟件開發中的一個古老而強大的概念，當咱們在應用程序中使用路由相關模式時，它很是有用。

若是您不太瞭解中間件的含義，Nodejs框架Express裏的中間件能夠幫助您瞭解它們的工做原理。

可是，中間件僅適用於後端嗎？

不，當應用程序中有路由時，中間件在前端或後端中就會很是常見。好比如今流行的單頁應用程序。

有一些示例能夠說明，什麼時候可使用中間件：

不容許未登陸用戶訪問您的網頁。
僅容許某些類型的用戶查看頁面（角色：管理員，做者等）
數據採集。
重置設置或清理存儲空間。
限制訪問用戶的年齡。
還有一些......

那麼如何在Vue中使用中間件？

感謝Vue Router，這將很是簡單！由於這個插件實現了一個相似的概念，稱爲「導航守衛」。

導航守衛真的很棒，讓咱們在進入路由以前，更新以前和離開以前，能夠執行一些代碼邏輯。

還可使用全局守衛。

但有時咱們須要多箇中間件用於同一路由，咱們能夠用Vue Router Multiguard包解決問題。這容許咱們設置一系列守衛，以下所示：

在上邊示例中能夠看到，經過Vue Router Multiguard，在路由配置中應用中間件很容易。讓咱們再看一個簡化的例子：

首先，咱們定義一個模擬用戶。而後假設您有一個服務，能夠從全局state或其餘地方得到當前用戶的數據。

如今，咱們能夠用中間件建立咱們的「真實」示例：

---

PS：

1.Vue Router還有組件內的守衛

* beforeRouteEnter

* beforeRouteUpdate (2.2 新增)

* beforeRouteLeave

其中beforeRouteEnter，很適合在進入頁面以前去獲取數據。

2.若是你閱讀了文檔，你會發現你能夠將下一個路由傳遞給 next() 函數，例如重定向到 login - next('/login')