<dd id="t699n"></dd>

  • <em id="t699n"></em>

    1. <dd id="t699n"></dd>

      淺談Vue之axios請求攔截器和響應攔截器實際作用

      時間:2021-09-15 09:41:22 類型:vue
      字號:    

        最近在項目開發中,遇到下面這樣一個問題:

        在進行數據請求之前,每個請求需要攜帶token, 但是token 有有效期,token 失效后需要換取新的token并繼續請求。

        需求分析

        每個請求都需要攜帶 token ,所以我們可以使用 axios request 攔截器,在這里,我們給每個請求都加 token,這樣就可以節省每個請求再一次次的復制粘貼代碼。

        token 失效問題,當我們token 失效,我們服務端會返回一個特定的錯誤表示,比如 token invalid,但是我們不能在每個請求之后去做刷新 token 的操作呀,所以這里我們就用 axios response 攔截器,我們統一處理所有請求成功之后響應過來的數據,然后對特殊數據進行處理,其他的正常分發

        功能實現

        分析完問題后,我們來實現功能

        安裝axios, 這里我們就不再贅述怎么安裝axios.

        在 main.js 注冊 axios

           

        在 request 攔截器實現

      axios.interceptors.request.use(
       config => {
        config.baseURL = '/api/'
        config.withCredentials = true // 允許攜帶token ,這個是解決跨域產生的相關問題
        config.timeout = 2500
        let token = sessionStorage.getItem('access_token')
        let csrf = store.getters.csrf
        if (token) {
         config.headers = {
          'access-token': token,
          'Content-Type': 'application/x-www-form-urlencoded'
         }
        }
        if (config.url === 'refresh') {
         config.headers = {
          'refresh-token': sessionStorage.getItem('refresh_token'),
          'Content-Type': 'application/x-www-form-urlencoded'
         }
        }
        return config
       },
       error => {
        return Promise.reject(error)
       }
      )

        在 response 攔截器實現

      axios.interceptors.response.use(
       response => {
        // 定時刷新access-token
        if (!response.data.value && response.data.data.message === 'token invalid') {
         // 刷新token
         store.dispatch('refresh').then(response => {
          sessionStorage.setItem('access_token', response.data)
         }).catch(error => {
          throw new Error('token刷新' + error)
         })
        }
        return response
       },
       error => {
        return Promise.reject(error)
       }
      )



      1、請求攔截器

      axios.interceptors.request.use(function (config) {
          // 在發送請求之前做些什么,例如加入token
          .......
          return config;
        }, function (error) {
          // 對請求錯誤做些什么
          return Promise.reject(error);
        });

      2、響應攔截器

      axios.interceptors.response.use(function (response) {
          // 在接收響應做些什么,例如跳轉到登錄頁
          ......
          return response;
        }, function (error) {
          // 對響應錯誤做點什么
          return Promise.reject(error);
        });

      3、移除攔截器

      var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
      axios.interceptors.request.eject(myInterceptor);


      黄网站免费 <