【token】刷新token,替换请求头

token过期,用refreshToken 去刷新 token

处理: 在每一个请求之前,都去请求刷新token的接口,这里在axios里面用的ajax,因为在axios里面用到了响应拦截,如果还用axios,就会陷入死循环。因为涉及到一个页面刚进入,会去请求多个接口,造成 一个页面刚进入会请求多个token接口,所以 用到

防抖、节流,这些都是在axios的请求拦截器里面进行处理的。

let dounceNum = 1;
axios.interceptors.request.use(function (config) {
  let token = Cookies.get('token');
  let userid = Cookies.get('userid');
  // let refreshToken = Cookies.get('refreshToken');
  // let userName = Cookies.get('userName');
  if (dounceNum == 1) {
    $.ajax({
      type: 'post',
      url: config.baseURL + '/isc/auth/token',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'X-Authorization': 'Bearer ' + Cookies.get('refreshToken')
        // 'ticket': store.getters.User.ticket || '',
        // 'locale': i18n.locale || ''
      },
      contentType: "json",
      dataType: "json",
      data: JSON.stringify({ 'userid': Cookies.get('userid') }),
      cache: false,
      async: false,
      success: function (res) {
        // console.log(res)
        if (res.code == '00000000') {
          Cookies.set('token', res.data.token);
          Cookies.set('refreshToken', res.data.refreshToken);
          let token = Cookies.get('token');
          // console.log('token1', token)
          config.headers['X-Authorization'] = `Bearer ${token}`;
        } else {
          // Message.error('登陆信息已失效,请重新登陆')
        }
      }
    });
  } else {
  }
  setTimeout(() => {
    dounceNum = 1
  }, 1000)

  dounceNum = dounceNum + 1;

  if (token && userid) {
    // console.log('99999')
    if (config.url === 'isc/auth/token') {
      let refreshToken = Cookies.get('refreshToken');
      config.headers['X-Authorization'] = `Bearer ${refreshToken}`;
      config.headers.common['X-Authorization'] = `Bearer ${refreshToken}`;
    } else {
      let token = Cookies.get('token');
      // console.log('token2', token)
      config.headers['X-Authorization'] = `Bearer ${token}`;
      config.headers.common['X-Authorization'] = `Bearer ${token}`;
    }
  } else {
    if (token === null || userid === null) {
      router.replace({
        path: '/login'
      })
    }
  }
  // console.log(config.headers)
  return config
}, function (error) {
  return Promise.reject(error)
});

中途需要注意点:1、 ajax 只能是同步请求, 异步的话, 就算拿到新的token,也因为响应问题,不会去替换请求头

                             2、替换请求头的时候,使用 config.headers['X-Authorization'] = `Bearer ${token}`;有效!

                                                  之前的写法是:config.headers.common['X-Authorization'] = `Bearer ${token}`; 无效!

你可能感兴趣的:(【token】刷新token,替换请求头)