Vue token處理(請求攔截器,響應攔截器)
阿新 • • 發佈:2020-12-07
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
- 攜帶請求地址,跳轉到登陸頁
- 新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: '
// 請求頭中攜帶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)
})