在Vue項目中，有兩種用戶登錄狀態判斷并處理的情況，分別為：導航守衛和axios攔截器。

　　1. 導航守衛：攔截組件

　　· 導航守衛就是我們進行某些頁面的時候需要判斷當前用戶是否登錄過，如果登陸過，則可以跳轉，否則重定向到登錄頁面

　　· 導航守衛只是前端做出判斷，檢查請求頭中是否帶有token，并不能判斷token是否失效

　　· 每個守衛方法接收三個參數：

　　o to: Route: 即將要進入的目標 路由對象

　　o from: Route: 當前導航正要離開的路由

　　o next: Function: 一定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。

　　o next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是 confirmed (確認的)。

　　o `next(false)`: 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址。

　　o next('/') 或者 next({ path: '/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項。

　　o next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

　　o ps: 一定要確保要調用next

  // 添加路由守衛--導航守衛

    // 作用是通過判斷來決定當前的路由跳轉到底能不能進行

    // 這種守衛，只要進行路由的跳轉就會自動的觸發，不能人為調用

    router.beforeEach((to, from, next) => {

      // to:目標路由

      // from:源路由

      // next:下一步的操作，就是用戶當前需要進行的操作

      console.log(to);

      // console.log(from);

      // 判斷當前用戶是否登陸，如果登陸了則可以跳轉，否則重定向到登陸頁

      // 獲取用戶登陸之后的token，進行token的判斷

      if (to.path !== '/login' || to.path !== '/register') { // 非登錄頁面驗證是否存在token

        let token = localStorage.getItem('token')

        if (token) {

          next()

        } else {

          Toast('請先登陸')

          // 說明沒有登陸，則重定向到登陸頁

          next({ name: 'login' })

        }

      } else {

        next()

      }

    })

　　2. axios攔截器：攔截后端接口

　　· 每次發送請求之前判斷vuex或者本地存儲中是否存在token

　　· 如果存在，則統一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況

　　· 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷

    // 添加請求攔截器

    // 每一個我們自己封裝的axios請求都會經過這個攔截器

    axios.interceptors.request.use(function (config) {

        console.log(config)

        // 在發送請求之前做些什么:我要看看有沒有token,如果有，則以請求頭的方式進行傳遞

        let token = localStorage.getItem('token')

        if (token) {

          // 設置請求頭

          config.headers.Authorization = token

        }

        return config;

      }, function (error) {

        // 對請求錯誤做些什么

        return Promise.reject(error);

    });

　　3. 導航守衛和axios攔截器的區別

　　· 導航守衛就是路由守衛，想進入一個頁面時，判斷是否有權限訪問(有token，就有權限，沒有就返回)，但并不能判斷是否失效。

　　· axios攔截器是發送請求判斷token的有效性，如果有就將token放在請求頭里。

　　· 導航守衛和axios攔截器一起使用，進而來確保登錄的狀態

　　更多關于IT前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。