Vue token處理（請求攔截器，響應攔截器）

1.登錄成功后，拿到vueX里的token（本地也存儲過），給請求都添加token
vueX里的tokenInfo包括token和refresh_token
request.interceptors.request.use(function (config) {
// 在發送請求之前做些什么
// token 在 user模塊里
const token = store.state.user.tokenInfo.token
/* 如果token存在的話，給每個請求加上token */
if (token) {
config.headers.Authorization = Bearer ${token}
}
return config
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error)
})

// 處理token
/*

• 有refresh_token，用refresh_token去請求回新的token
  • 新token請求成功
    • 更新本地token
    • 再發一次請求A
  • 新token請求失敗
    • 清空vuex中的token
    • 攜帶請求地址，跳轉到登陸頁
• 沒有refresh_token
  • 清空vuex中的token
  • 攜帶請求地址，跳轉到登陸頁 */
    request.interceptors.response.use(function (response) {
    // 對響應數據做點什么 (成功響應) response 就是成功的響應 res
    return response
    }, async function (error) {
    // 對響應錯誤做點什么 (失敗響應) 處理401錯誤
    // console.dir(error)
    if (error.response.status === 401) {
    // 獲取 refresh_token, 判斷是否存在, 存在就去刷新token
    const refreshToken = store.state.user.tokenInfo.refresh_token
    if (refreshToken) {
    try {
    // 獲取新的token
    const res = await axios({
    method: 'put',
    url: 'http://toutiao-app.itheima.net/v1_0/authorizations',
    // 請求頭中攜帶refresh_token信息
    headers: {
    Authorization: Bearer ${refreshToken}
    }
    })
    const newToken = res.data.data.token
    // 將新token更新到vuex中
    store.commit('user/setTokenInfo', {
    refresh_token: refreshToken,
    token: newToken
    })
    // 重新發送頁面請求, 攜帶的是token
    return request(error.config)
    } catch (error) {
    // 說明, 有refresh_token, 但是refresh_token也失效了 (登錄失效了)
    // 先清除無效的token (vuex)
    store.commit('user/removeTokenInfo')
    Toast.fail('登錄已過期, 請重新登錄')
    router.push({
    path: '/login',
    query: {
    backTo: router.currentRoute.fullPath
    }
    })
    }
    } else {
    // 沒有refreshToken, 直接去登錄, 將來還能跳回來
    // router.currentRoute 指向當前路由信息對象 === 等價於之前頁面中用的 this.$route
    // 清除本地token, 跳轉登錄 (無意義的本地token內容, 要清除)
    store.commit('removeToken')
    router.push({
    path: '/login',
    query: {
    // currentRoute當前路由
    backto: router.currentRoute.fullPath
    }
    })
    }
    }
    // 對響應錯誤做點什么
    // return new Promise(function (resolve, reject) {
    // reject(error)
    return Promise.reject(error)
    })