发布于 

token

响应拦截器: 处理token过期问题

替换token

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// Add a 响应拦截器 interceptor
request.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response
}, async function (error) {
// 有错误到这里来,只处理401错误(是由token过期,错误导致)。
if (error.response.status === 401) {
if (store.state.user && store.state.user.refresh_token) {
try {
// 用refresh_token去求一个特殊的接口以获取新的token
const result = await axios({
url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
method: 'PUT',
headers: {
Authorization: `Bearer ${store.state.user.refresh_token}`
}
})

// 从接口返加值中去取出新token,更新到当前的vuex中
// mutations去改token
store.commit('updateToken', result.data.data.token)
console.log('更新token ok')
// console.log(result)
// error.config 就是当前错误发生时,axios中的配置

// 更新了token请求重发一次
return request(error.config)
// store.state.user.token = result.data.data.token
} catch (e) {
console.log('更新token,refresh_token 失败')
// 消除vuex的token
store.commit('setUser', null)
// 必须要重新登陆
router.push({
path: '/login',
query: {
// router中有一个属性currentRoute
from: router.currentRoute.fullPath
}
})
}
} else {
console.log('没有refresh token,准备去重新登陆吧')
router.push({
path: '/login',
query: {
// router中有一个属性currentRoute
from: router.currentRoute.fullPath
}
})
}
console.log('响应拦截器')
console.dir(error)
} else {
return Promise.reject(error)
}
})

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。