在Vue中我们怎么去使用长token(refresh_token)？

使用长token的思路(具体步骤)：

1. 当用户发请求时，如果后端返回401，就说明token过期 这时我们要统一监测后端返回的401代码

   • 我们需要添加响应拦截器，在拦截器里的报错函数中监测判断token是否过期，代码如下：

     if (error.response.status === 401) {
              console.log('token过期')
     }
     

2. 监测到401报错，就拿长token refresh_token 发请求获取最新的token

   • 注意点：不能用request发，会死循环，因为request设置了请求拦截器，会注入老token （前提是自己封装了request）代码示例如下：

     // 用axios发请求
         const { data } = await axios({
           url: 'http://toutiao.itheima.net/v1_0/authorizations',
           method: 'PUT',
           headers: {
             Authorization: `Bearer ${store.state.token.refresh_token}` /* 怎么拿refresh_token */
           }
         })
     

3. 接着用新token存到vuex中，存到本地存储，在js文件中不能用辅助函数 ,利用解构赋值覆盖旧token ，代码如下：

    store.commit('setUser', { ...store.state.token, token: data.data.token })
   

4. 自动的再发一次用户上次发的请求

   return request(error.config)
   

完整代码如下：

// 添加响应拦截器
request.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response
}, async function (error) {
  /* //监测token过期 */
  if (error.response.status === 401) {
    // console.log('token过期')
    // 发请求，刷新token
    // 注意：不能用request发，会死循环，因为request设置了请求拦截器，会注入老token
    // 用axios发请求
    const { data } = await axios({
      url: 'http://toutiao.itheima.net/v1_0/authorizations',
      method: 'PUT',
      headers: {
        Authorization: `Bearer ${store.state.token.refresh_token}` /* //怎么拿refresh_token */
      }
    })
    // 新token存到vuex中，存到本地存储，在js文件中不能用辅助函数
    // 利用解构赋值覆盖旧token
    store.commit('setUser', { ...store.state.token, token: data.data.token })
    // 再发一次上次发送过得请求(error里有上一次发送的地址和错误的token)
    return request(error.config)
  }
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})