vue三十七:Vue-Router之路由守衛之全局守衛和局部守衛


 

對於某些接口的前置校驗,比如未登錄狀態下訪問個人中心,明顯是不應該訪問到的,應該跳轉到登錄頁面才對

官方說明:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

 

一、全局路由守衛:就是在整個網頁中,只要發生了路由的變化,都會觸發。全局導航守衛主要包括兩個函數,分別為:beforeEach、afterEach。

1. `beforeEach(to,from,next)`:`to`代表的是上一個路由對象,`from`代表的是下一個路由對象。next代表的是控制下一步路由該怎么走。
  * next():按照正常的流程來走。
  * next("/"):之前的路由被斷掉了,重新走到/中去。
  * next(false)或者是沒有調用:不會導向任何路由。
2. `afterEach(to,from)`:路由完成后的回調。

以上方式會把所有的請求都攔截下來,現在只需要實現訪問/center的時候進行身份校驗即可

在/center判斷的分支下,判斷是否已登錄,已登錄則放行,否則跳轉到登錄組件

登錄組件

導入Login組件並注冊路由

模擬登錄狀態

路由攔截

 

二、局部路由守衛(組件內的守衛)

路由加載之前觸發:beforeRouteEnter (to, from, next)
更新路由之前觸發:beforeRouteUpdate (to, from, next)
離開當前路由之前觸發:beforeRouteLeave (to, from, next)

使用局部守衛實現訪問/center路由時判斷段是否登錄

注釋掉原來的全局守衛

在center組件中創建局部守衛

訪問center

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM