iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
1
自我挑戰組

Vue 與 Element UI 兩三事系列 第 26

Vue 與 Element UI 兩三事#26 導航守衛

  • 分享至 

  • xImage
  •  

正文:
當使用者進入後台後,會根據其權限決定它可以看到甚麼樣的內容,不過若他知道了沒有權限頁面的網址該怎麼辦呢,這邊就來看看 vue router 的導航守衛如何使用吧

const router = new VueRouter({...})
router.beforeEach((to,from,next) => {...})

在這裡,我們透過了 router.beforeEach 來建立了一個全域的導航前置守衛,三個參數分別為 to 即將要進入的路由對象,from 當前要離開的路由對象,next 路由方法,可以透過 next('/')next({path: '/'}) 來中斷目前的導航並先建立一個新的導航,也可以使用 next(false) 來中斷此次導航,又或者是使用 next() 來進行本次導航

除了在選單或導覽列上隱藏使用者無法進入的頁面外,最好還是使用導航守衛來將使用者的路由進行控管,以最常見的例子來說就是當使用者未當入時,無論他要前往哪個頁面都會被強制導向登入頁面,以防止在不適合的身分上進行敏感的操作。


上一篇
Vue 與 Element UI 兩三事#25 登入頁
下一篇
Vue 與 Element UI 兩三事#27 第四週回顧
系列文
Vue 與 Element UI 兩三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言