javascript - 使用 `axios.interceptors` 获取新 token

Question

当token过期后，我想根据refresh_token获取新的token。我读到这可以通过 axios.interceptors 获得。

请检查是否:

• 我是否正确配置了 axios.interceptors？
• 我是否将其放置在正确的位置，即 Items 类之上。
• axios.interceptors.response 被分配给 interceptor 变量。我应该如何处理这个变量？

除了“axios.interceptors”之外，我还需要获得一个新 token 。 token 有效期为 24 小时。

• 我是否必须等待 24 小时才能测试它是否有效，或者是否可以通过其他方式更快地进行测试？
• 我应该把“client_id”、“secret_id”、“grant_type”放在哪里？

代码在这里:https://stackblitz.com/edit/react-pkea41

import axios from 'axios';

axios.defaults.baseURL = localStorage.getItem('domain');

const interceptor = axios.interceptors.response.use(
  response => response,
  error => {
      // Reject promise if usual error
      if (errorResponse.status !== 401) {
          return Promise.reject(error);
      }

      /* 
       * When response code is 401, try to refresh the token.
       * Eject the interceptor so it doesn't loop in case
       * token refresh causes the 401 response
       */
      axios.interceptors.response.eject(interceptor);

      return axios.post('/api/refresh_token', {
          'refresh_token': JSON.parse(localStorage.getItem('token'))['refresh_token']
      }).then(response => {
          /*saveToken();*/
          localStorage.setItem('token', JSON.stringify(response.data));
          error.response.config.headers['Authorization'] = 'Bearer ' + response.data.access_token;
          return axios(error.response.config);
      }).catch(error => {
          /*destroyToken();*/
          localStorage.setItem('token', '');
          this.router.push('/login');
          return Promise.reject(error);
      }).finally(createAxiosResponseInterceptor);
  }
);

class Items extends Component {

  constructor (props) {
    super(props);
    this.state = {

    }
  }


  render () {
    return (
      <div >

      </div>
    )
  }
}


render(<Items />, document.getElementById('root'));

Answer 1

这是我之前做的。你的配置和我的有点不同。

const baseURL = localStorage.getItem('domain');
const defaultOptions = {
  baseURL,
  method: 'get',
  headers: {
    'Content-Type': 'application/json',
  }
};
// Create Instance
const axiosInstance = axios.create(defaultOptions);
// Get token from session
const accessToken = ...

// Set the auth token for any request
instance.interceptors.request.use(config => {
  config.headers.Authorization = accessToken ? `Bearer ${accessToken}` : '';
  return config;
});

// Last step: handle request error general case
instance.interceptors.response.use(
  response => response,
  error => {
    // Error
    const { config, response: { status } } = error;

    if (status === 401) {
      // Unauthorized request: maybe access token has expired!
      return refreshAccessToken(config);
    } else {
      return Promise.reject(error);
    }
  }
});

我认为这部分应该与 Components 分开——它将放在 helpers 或 utils 上。 此外，您必须等待 24 小时，因为在 24 小时之前不会调用 refreshToken() 方法。 您不需要在此处处理 client_id、secret_id、grant_type。