token续签

token续签

目标

• token过期401, 强制跳转到登录页, 清空本地和store中的token数据
• token过期401, 用refresh_token无感知的刷新一个新的token回来
  • 替换旧的token的同时, 继续上次未完成的请求. 用户体验好

步骤

1. 定义刷新token的接口方法

   // 用户 - 更新token
   export const refreshTokenAPI = () => request({
     url: '/v1_0/authorizations',
     method: 'PUT',
     headers: {
       Authorization: `Bearer ${store.state.refresh_token}`
     }
   })
   

2. 在响应拦截器401处, 调用重新请求token的接口, 然后同步给vuex和本地

   axios.interceptors.response.use(function (response) { 
     return response
   }, async function (error) {
     if (error.response.status === 401) { // 身份过期
       // token续签方式1:
       // store.commit('setToken', '')
       // router.push({ path: '/login' })
   
       // token续签方式2: refreshToken(用户无感知)
       store.commit('setToken', '')
       const res = await refreshTokenAPI()
       store.commit('setToken', res.data.data.token)
       // 再调用一次未完成的请求啊(用户无感知)
       // error.config 就是上一次axios请求的配置对象
       // console.dir(error.config)
       // 把新的token赋予到下一次axios请求的请求头中
       error.config.headers.Authorization = 'Bearer ' + res.data.data.token
       // return到await的地方
       return ajax(error.config)
     } else {
       return Promise.reject(error)
     }
   })
   

小结

• token过期, 强制跳转登录
• token过期, 无感知刷新token, 重新再发起一次请求