如何保護Vue.js中的客戶端路線？

我正在構建一個使用Vue.js作爲前端框架的Spa，該框架與使用jsonwebtokens的純json後端對話。我更熟悉React生態系統。我目前不確定如何保護Vue.js中的客戶端路線。（我不是在架構上作出決定。我是一名新員工。耶！）如何保護Vue.js中的客戶端路線？

在反應我會做這樣的事情。在項目的index.js文件中。在應用程序安裝之前，檢查本地存儲中是否存在jsonwebtoken。如果有，則將redux狀態設置爲登錄。如果沒有設置爲註銷。

我會再使用高階組件來保護我的路線，這樣每當用戶試圖進入客戶端保護的途徑，我會用它檢查登錄狀態componentWillMount生命週期方法。如果登錄呈現組件。否則重定向到登錄頁面。

看來，在VUE高位成分不能夠達到相同的行爲。或者我不能找到說明我如何實現它的文檔。有人可以與我分享他們如何解決這個問題嗎？

來源

2017-04-15 Nate

這是使用Vue.js身份驗證實施的一個很好的例子：link

更具體地講，這裏是手動約NAV。後衛：link

來源

2017-04-15 09:42:59 wostex

正如documentation解釋，你可以在所有你要檢查認證

在文檔中提供的示例中的路由信息使用元精密組件：

router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresAuth)) { 
     // this route requires auth, check if logged in 
     // if not, redirect to login page. 
     if (!auth.loggedIn()) { 
      next({ 
       path: '/login', 
       query: { redirect: to.fullPath } 
      }) 
     } else { 
      next() 
     } 
    } else { 
     next() // make sure to always call next()! 
    } 
})

或用於組件導航衛士，你可以按照wostex提供的第二個鏈接

來源

2017-04-15 10:41:04

如何保護Vue.js中的客戶端路線？

回答

相關問題