Как правильно перехватывать запросы и управлять токенами и их обновлением с помощью axios.interceptors? - PullRequest
Новая
       15

Как правильно перехватывать запросы и управлять токенами и их обновлением с помощью axios.interceptors?

0 голосов
/ 05 апреля 2019

Мне может понадобиться некоторая помощь, как использовать перехватчики axios здесь.Это часть экрана входа в систему.Я хочу, чтобы перехватчик обновил токен, когда он пропал или истек срок его действия.Я даже не уверен, что это правильное место, чтобы иметь этот код, так как обновление токена должно произойти и после входа в систему.У меня есть два экземпляра axios.Один для API и один для auth0.Мне нужен был бы способ соединить их, чтобы они работали вместе и были надежными. 

import token from "../../network/axios-auth0";
import client from "../../network/axios-client";  

//Gets token and updates the redux token value
getToken() {
    token.post("token", {
      client_id: config.clientId,
      client_secret: config.clientSecret,
      audience: config.clientAudience,
      grant_type: "client_credentials"
    })
      .then(response => {
        this.props.onUpdateToken(response.data.access_token);
        this.getGroup(response.data.access_token)
      })
      .catch(function (error) {
        console.log(error);
      })
  }

//Gets token from redux and gets data
  getGroup() {
    client.interceptors.request.use(function (config) {
      //call getToken() for new token or check old token
      return config;
    }, function (error) {
      // Do something with request error
      return Promise.reject(error);
    });

    client.get("groups/5ca21cd1cb9134222e397f14", {data: {}, headers: {"Authorization":"Bearer " + this.props.bearerToken}})
      .then(response => {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
  }


  onLoginPress(){
    this.getToken();
  }

  render() {
    return (
      <View>
        <TextInput placeholder={"user"}/>
        <TextInput placeholder={"pass"}/>
        <Button title={"login"} onPress={() => this.onLoginPress()}/>
      </View>
    )
  }

const mapStateToProps = state => {
  return {
    token: state.values.token
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onUpdateToken: (value: string) => dispatch(updateToken(value))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);

Я имею в виду, что перехватчик будет необходим при каждом вызове axios (чтобы предотвратить зависание запроса из-за старого токена).лучше приложить его к экземпляру.Но тогда я не знаю, как обновить токен в redux из файла, в котором определен экземпляр.Возможно, это тоже не лучшая практика.Вот один из 2 определенных случаев.

import axios from "axios"
import config from "../config"


const client = axios.create({
  baseURL: config.apiUrl,
  headers: {
    "Content-type": "application/json"
  }
});
client.defaults.headers.get["Content-Type"] = "application/json";

export default client;

Как бы это сделать профессионально.Я не хочу копировать перехватчик для каждого вызова в приложении.

...