// 阻攔響應(yīng)器
request.interceptors.response.use(function (response) {
  return response
}, async function (error) {
  if (error.response && error.response.status === 401) {
    // token續(xù)簽方式1:
    //清空當(dāng)前vuex保存的token（我們這的vuex和本地已經(jīng)建立了關(guān)系，相當(dāng)于也清空了本地token）
     store.commit('upUser', '')
     console.log(router.currentRoute.fullPath)// 當(dāng)前路由的完整路徑（#后面的）
      //這里我們采用?path=的方式保存當(dāng)前瀏覽頁(yè)面的完整路徑，
    // push()會(huì)產(chǎn)生歷史記錄 而replace不會(huì)有歷史記錄
     router.push({ path: `/login?path=${router.currentRoute.fullPath}` })
 
  }
  return Promise.reject(error)
})

// 1.點(diǎn)擊登入
    async onSubmit () {
      try {
        const { data: res } = await loginAPI(this.user)
        //登錄成功
        // 不嚴(yán)謹(jǐn)?shù)姆祷厣洗螢g覽的頁(yè)面
        // this.$router.back()
        // 推薦方式：
        // 登錄后, 判斷有未遂地址（有未遂地址的情況是：token過期，在阻攔響應(yīng)器中實(shí)現(xiàn)對(duì)未遂地址的保存）, 登入成功后跳轉(zhuǎn)到未遂地址, 否則去/路徑（跳到首頁(yè)--這種情況是：用戶主動(dòng)前往登入頁(yè)面的登入，沒有未遂地址，登入成功后直接前往首頁(yè)）
        // replace不會(huì)產(chǎn)生路由歷史記錄
        this.$router.replace({
          path: this.$route.query.path || '/'
        })
        // 存儲(chǔ)獲取過來的token
        this.$store.commit('upUser', res.data)
      } catch (err) {
        console.log(err)
        if (err.response.status === 400) {
          this.$toast.fail('手機(jī)號(hào)或驗(yàn)證碼錯(cuò)誤')
        } else {
          this.$toast.fail('登入失敗，請(qǐng)稍后再試') // 可能由于網(wǎng)絡(luò)問題導(dǎo)致的登入失敗
        }
      }
    },

// 刷新用戶token
export const updataTokenAPI = function () {
  return request({
    method: 'PUT',
    url: '/v1_0/authorizations',
    headers: {
      Authorization: `Bearer ${store.state.user.refresh_token}`
    }
  })
}

import request from '@/utils/request'
import store from '@/store'
 
// 請(qǐng)求響應(yīng)器
request.interceptors.request.use(function (config) {
  // config ：本次請(qǐng)求的配置對(duì)象
  // config 里面有一個(gè)屬性：headers
  const { user } = store.state
//請(qǐng)求頭未配置信息的時(shí)候才會(huì)配置
  if (user.token && config.headers.Authorizatio === undefined) {
    config.headers.Authorization = `Bearer ${user.token}`
  }
  // 這里必須將config返回出去，否則請(qǐng)求會(huì)停在這 里
  return config
}, function (error) {
  // 如果請(qǐng)求出錯(cuò)（還沒發(fā)送出去，可能是代碼寫錯(cuò)了的問題），就會(huì)進(jìn)入這里
  return Promise.reject(error)
})
 
// 阻攔響應(yīng)器
request.interceptors.response.use(function (response) {
  return response
}, async function (error) {
  if (error.response && error.response.status === 401) {
    // token續(xù)簽方式2: refreshToken(用戶無感知)
    // 將過期的token值清空
    store.commit('updataToken', '')
    //請(qǐng)求刷新token接口
    const { data: res } = await updataTokenAPI()
    //保存新的token值
    store.commit('updataToken', res.data.token)
    // 再調(diào)用一次未完成的請(qǐng)求啊(用戶無感知)
    // error.config 就是上一次axios請(qǐng)求的配置對(duì)象
    // console.dir(error.config)
    // 把新的token賦予到下一次axios請(qǐng)求的請(qǐng)求頭中
    error.config.headers.Authorization = 'Bearer ' + res.data.token
    // return到await的地方，將未完成的請(qǐng)求再次發(fā)起，
    return axios(error.config)
  } else if (error.response.status === 500 && error.config.url === '/v1_0/authorizations') {
    // 因?yàn)?00的情況有很多種，refresh_token失效也是其中一種情況，所有再加上error.config.url === '/v1_0/authorizations'條件，確保是refresh_token失效情況
    // 清空所有的token和refresh_toekn，并且強(qiáng)制跳轉(zhuǎn)登錄頁(yè)面
    store.commit('upUser', {})
    router.push({ path: '/login' })
    Toast.fail('身份已過期')
  }
  return Promise.reject(error)
})