1. 程式人生 > 實用技巧 >vue專案中的路由守衛

vue專案中的路由守衛

路由守衛的意義就相當於一個保安一樣,作用很大,在實際的專案中運用也是不少,也就是當客戶在登陸自己賬號的時候,有可能存在客戶有啥事的時候,自己後臺或者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('/') // 如果去的是別的頁面 直接跳轉到登入頁
    }
  }
})

 我這個是通過登入過的賬號本地會儲存這該賬號的資訊進行判斷的,大家也可以用自己的方式設定賬號是否登入。