vue導(dǎo)航守衛(wèi)和登錄控制

ver-router 提供的導(dǎo)航守衛(wèi)通過跳轉(zhuǎn)或取消的方式進(jìn)行守衛(wèi)導(dǎo)航。
可以通過全局的、單個(gè)路由獨(dú)享的、組件級(jí)的

全局前置守衛(wèi)

router.beforeEach

  • to: Route: 即將要進(jìn)入的目標(biāo) 路由對(duì)象

  • from: Route: 當(dāng)前導(dǎo)航正要離開的路由

  • next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。
    next(): 進(jìn)行管道中的下一個(gè)鉤子。如果全部鉤子執(zhí)行完了,則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。
    next(false): 中斷當(dāng)前的導(dǎo)航。如果瀏覽器的 URL 改變了 (可能是用戶手動(dòng)或者瀏覽器后退按鈕),那么 URL 地址會(huì)重置到 from 路由對(duì)應(yīng)的地址。
    next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個(gè)不同的地址。當(dāng)前的導(dǎo)航被中斷,然后進(jìn)行一個(gè)新的導(dǎo)航。你可以向 next 傳遞任意位置對(duì)象,且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項(xiàng)以及任何用在 router-linkto proprouter.push 中的選項(xiàng)。
    next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個(gè) Error 實(shí)例,則導(dǎo)航會(huì)被終止且該錯(cuò)誤會(huì)被傳遞給 router.onError() 注冊(cè)過的回調(diào)。

進(jìn)行驗(yàn)證

router.beforeEach((to, from , next)=>{
  // console.log(store.getters.getUser)
  let user = JSON.parse(sessionStorage.store).user
  if(user.token == "" && to.name !== "login"){
    next({ name: 'login' })
  }else{
    next()
  }
  
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容