對於某些接口的前置校驗,比如未登錄狀態下訪問個人中心,明顯是不應該訪問到的,應該跳轉到登錄頁面才對
官方說明: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