正文:
當使用者進入後台後,會根據其權限決定它可以看到甚麼樣的內容,不過若他知道了沒有權限頁面的網址該怎麼辦呢,這邊就來看看 vue router 的導航守衛如何使用吧
const router = new VueRouter({...})
router.beforeEach((to,from,next) => {...})
在這裡,我們透過了 router.beforeEach 來建立了一個全域的導航前置守衛,三個參數分別為 to
即將要進入的路由對象,from
當前要離開的路由對象,next
路由方法,可以透過 next('/')
、next({path: '/'})
來中斷目前的導航並先建立一個新的導航,也可以使用 next(false)
來中斷此次導航,又或者是使用 next()
來進行本次導航
除了在選單或導覽列上隱藏使用者無法進入的頁面外,最好還是使用導航守衛來將使用者的路由進行控管,以最常見的例子來說就是當使用者未當入時,無論他要前往哪個頁面都會被強制導向登入頁面,以防止在不適合的身分上進行敏感的操作。