refresh_token的处理使用

当token失效或者过期，服务器报错401

如果登录的时候返回的数据有refresh_token 那么我们可以用这个对上面触发这个问题做出优化

执行过程

在request文件中，获取响应拦截器判断是不是有401存在

// 响应拦截器 处理
request.interceptors.response.use(function (config) {
console.log('响应拦截器', config)
return config
}, error => {
console.log('响应拦截器err')
console.dir(error)
if (error.response.status === 401) {
getNewToken()
}
})

在接口文档中查询有没有新的token生成，有就封装一个接口

async function getNewToken () {
const { user } = store.state
// 判断仓库中是否有refresh_token 没有就发送一个新的请求 拿到一个新的token
if (user && user.refresh_token) {
const { data: res } = await request({
url: '/app/v1_0/authorizations',
method: 'PUT',
headers: { // 请求头中携带一个Authorization 在上面需要做判读 如果有了 就不要 加了
Authorization: `Bearer ${user.refresh_token}`
}
})
console.log('getnewtoken ->', res)
// 如果成功返回的话 把新的token存取到vuex 中 并保存到本地
if (res.message === 'OK') {
console.log('OK')
store.commit('setToken', res.data.token)
// 手动刷新
window.location.reload()
}
}
}

**注意:**在请求拦截器中需要判断请求头中有没有Authorization 没有才添加请求头代码如下

// 请求拦截器
// Add a request interceptor
request.interceptors.request.use(function (config) {
// Do something before request is sent
// config ：本次请求的配置对象
// config 里面有一个属性：headers
const { user } = store.state
// 如果有Authorization 就不要在加了 没有才加
if (user && user.token && !config.headers.Authorization) {
config.headers.Authorization = `Bearer ${user.token}`
}
return config
}, function (error) {
// Do something with request error
return Promise.reject(error)
})

更新本地和Vuex仓库

vuex中的

setToken (state, newToken) {
state.user.token = newToken
setItem(TOKEN_KEY, state.user)
}
在getNewToken中判断message 是否为OK
// 如果成功返回的话 把新的token存取到vuex 中 并保存到本地
if (res.message === 'OK') {
console.log('OK')
store.commit('setToken', res.data.token)
// 手动刷新
window.location.reload()

refresh_token的处理token失效问题

refresh_token的处理使用

执行过程