Блог

Возможно, мне понадобится помощь в использовании перехватчиков 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;
  

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