vue專案中的路由守衛
阿新 • • 發佈:2020-12-28
路由守衛的意義就相當於一個保安一樣,作用很大,在實際的專案中運用也是不少,也就是當客戶在登陸自己賬號的時候,有可能存在客戶有啥事的時候,自己後臺或者pc的關閉全部瀏覽器,沒有點選退出登入,或者在退出登入以後,部分客戶收藏了登入過後的連結地址,為了不需要登入就直接進入軟體或者頁面,這樣就會存在部分隱患,所以在實際專案中,公司也會讓你考慮到這一點。所以就需要記錄一下。
這裡我們使用的是router.beforeEach()的方法
一:這個方法含有3個引數
1.1:第一個to(我理解的去哪裡)
1.2:第二個from(來自哪裡)
1.3:第三個next()(就是放行,放你的路由通過)
router.beforeEach((to, from, next)=>{})
然後我們就可以在這個箭頭函式內部進行我們自己想要的判斷
router.beforeEach((to, from, next) => { let isLogin = local.get('Code') ? true : false; // 獲取登入的狀態 // 如果登入過 且是登入成功的 if (isLogin) { next() // 直接放行 } else { // 否則 // 如果去的是登入頁 if (to.path === '/') { next() // 直接放行 } else { next('/') // 如果去的是別的頁面 直接跳轉到登入頁 } } })
我這個是通過登入過的賬號本地會儲存這該賬號的資訊進行判斷的,大家也可以用自己的方式設定賬號是否登入。