在Vue項(xiàng)目中，有兩種用戶登錄狀態(tài)判斷并處理的情況，分別為：導(dǎo)航守衛(wèi)和axios攔截器。

　　1. 導(dǎo)航守衛(wèi)：攔截組件

　　· 導(dǎo)航守衛(wèi)就是我們進(jìn)行某些頁面的時候需要判斷當(dāng)前用戶是否登錄過，如果登陸過，則可以跳轉(zhuǎn)，否則重定向到登錄頁面

　　· 導(dǎo)航守衛(wèi)只是前端做出判斷，檢查請求頭中是否帶有token，并不能判斷token是否失效

　　· 每個守衛(wèi)方法接收三個參數(shù)：

　　o to: Route: 即將要進(jìn)入的目標(biāo) 路由對象

　　o from: Route: 當(dāng)前導(dǎo)航正要離開的路由

　　o next: Function: 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)。

　　o next(): 進(jìn)行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed (確認(rèn)的)。

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

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

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

　　o ps: 一定要確保要調(diào)用next

  // 添加路由守衛(wèi)--導(dǎo)航守衛(wèi)

    // 作用是通過判斷來決定當(dāng)前的路由跳轉(zhuǎn)到底能不能進(jìn)行

    // 這種守衛(wèi)，只要進(jìn)行路由的跳轉(zhuǎn)就會自動的觸發(fā)，不能人為調(diào)用

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

      // to:目標(biāo)路由

      // from:源路由

      // next:下一步的操作，就是用戶當(dāng)前需要進(jìn)行的操作

      console.log(to);

      // console.log(from);

      // 判斷當(dāng)前用戶是否登陸，如果登陸了則可以跳轉(zhuǎn)，否則重定向到登陸頁

      // 獲取用戶登陸之后的token，進(jìn)行token的判斷

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

        let token = localStorage.getItem('token')

        if (token) {

          next()

        } else {

          Toast('請先登陸')

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

          next({ name: 'login' })

        }

      } else {

        next()

      }

    })

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

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

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

　　· 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進(jìn)行判斷

    // 添加請求攔截器

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

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

        console.log(config)

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

        let token = localStorage.getItem('token')

        if (token) {

          // 設(shè)置請求頭

          config.headers.Authorization = token

        }

        return config;

      }, function (error) {

        // 對請求錯誤做些什么

        return Promise.reject(error);

    });

　　3. 導(dǎo)航守衛(wèi)和axios攔截器的區(qū)別

　　· 導(dǎo)航守衛(wèi)就是路由守衛(wèi)，想進(jìn)入一個頁面時，判斷是否有權(quán)限訪問(有token，就有權(quán)限，沒有就返回)，但并不能判斷是否失效。

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

　　· 導(dǎo)航守衛(wèi)和axios攔截器一起使用，進(jìn)而來確保登錄的狀態(tài)

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