vue中的請求攔截響應

請求攔截一般做什么操作?

 　　第一:判斷用戶是否登錄,沒有登錄的統一跳轉到登錄頁面.

　　第二:判斷用戶是否具有權限,沒有權限,提示權限不足.

　　...

　　每個項目可能做的處理不一樣,看自己需求.

響應攔截有什么用?

　　因為后端每次響應都不一定是成功的,然后前端需要根據不同狀態去做不同的處理,如果每個請求都去做處理,會多出很多重復的代碼,並且顯的很臃腫.

　　例如:后端返回資源不存在,token失效,權限不足,重定向等等

　　這樣我們就可以直接在響應攔截中做一次處理,這樣每個請求響應的時候都會經過這一邏輯,減少大量重復代碼.看起來也更加美觀.

下面上代碼:

首先我們要在項目中找到main.js文件

 

 

然后引入axios

 

 接下來就是添加攔截器了,首先是請求攔截

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
  // 在發送請求之前做些什么
  // 判斷是否存在token,如果存在將每個頁面header添加token
  if (sessionStorage.getItem("token")) {
    config.headers.common['Authorization'] = sessionStorage.getItem("token");
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})

至於需要在攔截之前做什么操作,就看自己需求了,以上是添加token的操作

下面的響應攔截,看需求,不需要可以不添加

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應數據做點什么
  return response
}, function (error) {
  // 對響應錯誤做點什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})

好了,到處我們需要的攔截器就完成了,當然了,以上我們只是添加了,以及引入了axios,並沒有掛載到vue,所以最后一步不要忘記哦

 

 至此就完美結束了.