Vue — 導航守衛

萬事順意發表於2024-03-14
Vue

Vue 的導航守衛是 Vue Router 提供的一種機制，用於在導航過程中對路由進行控制和管理。透過導航守衛，你可以在路由導航前、導航後、以及路由更新前後等不同階段執行特定的邏輯操作。

全域性前置守衛 (Global Before Guards):

beforeEach(to, from, next)：在路由跳轉前執行，可以用來進行路由驗證、許可權控制等操作。

//to去哪個地址
//from 從哪兒來
//next是否放行 (1)直接放行到to的路徑(2)next(/路徑) 進行攔截到next的路徑

//定義一個陣列存放需要使用者登入許可權的頁面
const authList = ['/pay','/myorder']
router.beforeEach((to,from,next)=>{

  if(!authList.includes(to.path)){
    next()
    return
  }

  const token = ''
  if(token!==''){
    next()
  }else{
    next('/my')
  }


})

相關文章