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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    // 這種守衛(wèi)，只要進(jìn)行路由的跳轉(zhuǎn)就會(huì)自動(dòng)的觸發(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)，否則重定向到登陸頁(yè)

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

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

        let token = localStorage.getItem('token')

        if (token) {

          next()

        } else {

          Toast('請(qǐng)先登陸')

          // 說(shuō)明沒(méi)有登陸，則重定向到登陸頁(yè)

          next({ name: 'login' })

        }

      } else {

        next()

      }

    })

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

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

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

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

    // 添加請(qǐng)求攔截器

    // 每一個(gè)我們自己封裝的axios請(qǐng)求都會(huì)經(jīng)過(guò)這個(gè)攔截器

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

        console.log(config)

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

        let token = localStorage.getItem('token')

        if (token) {

          // 設(shè)置請(qǐng)求頭

          config.headers.Authorization = token

        }

        return config;

      }, function (error) {

        // 對(duì)請(qǐng)求錯(cuò)誤做些什么

        return Promise.reject(error);

    });

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

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

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

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

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