Как я могу передать заголовки аутентификации другим компонентам

Question

Итак, я недавно начал работать с реагировать, я аутентифицирую пользователя в своем компоненте приложения следующим образом:

Приложение

signIn(userData) { 
  console.log(userData)
  //do a fetch call to get/users
  axios.get('http://localhost:5000/api/users', {
   auth: { //set auth headers so that userData will hold the email address and password for the authenticated user 
       username: userData. emailAddress,
       password: userData.password

}
}).then(results => { console.log(results.data)
      this.setState({
        //set the authenticated user info into state
        emailAddress: results.data,
        password: results.data.user
      });
})

}

, и я такжеесть другой компонент, называемый CreateCourse, который позволяет отправлять запрос только в том случае, если я предоставил заголовок авторизации из приложения,

CreateCourse

 handleSubmit = event => {
          event.preventDefault();
          console.log(this.props)
          const newCourse = {
            title: this.state.title,
            description: this.state.description,
            estimatedTime: this.state.estimatedTime,
            materialsNeeded: this.state.materialsNeeded
          };
          axios({ 
            method: 'post',
            url: 'http://localhost:5000/api/courses',
            auth: {
              username: this.props.emailAddress,
              password: this.props.password
           },
            data: newCourse
            }).then(
              alert('The course has been successfully created!')
            ).then( () => {
              const {  history } = this.props;
              history.push(`/`)
            })
        };

Мне было интересно, смогу ли я передатьзаголовок аутентификации из приложения App для дочерних компонентов без использования props или контекстного API, так что мне не нужно вручную ставить заголовки auth на каждый запрос axios, для справки это мое репо: https://github.com/SpaceXar20/full_stack_app_with_react_and_a_rest_api_p10

Answer 1

Я всегда создаю экземпляр singleton axios и задаю для него заголовок после успешного входа пользователя.

let instance = null

class API {
  constructor() {
    if (!instance) {
      instance = this
    }
    this.request = Axios.create({
      baseURL: 'http://localhost:5000',
    })
    return instance
  }

  setToken = (accessToken) => {
    this.request.defaults.headers.common.authorization = `Bearer ${accessToken}`
  }

  createCourses = () => this.request.post(...your post request...)
}

export default new API()

После успешного входа в систему вам нужно позвонить API.setToken(token). Затем при вызове Api.createCourse() запрос будет иметь токен в заголовках.

Answer 2

Экземпляр Singleton Axios - правильный подход. В том же шаблоне используйте метод ниже. Импортируйте файл везде, где требуется, и используйте axiosapi.get.

const axiosConfig = {auth: {username: XXXX, password: YYYY}}; 
const axiosservice = axios.create(axiosConfig);
export const axiosapi = {
  /**
   * Describes the required parameters for the axiosapi.get request
   * @param {string} url  
   * @param {Object} config - The configfor the get request (https://github.com/axios/axios#request-config)   
   *
   * @returns {Promise}
   */
  get: (url, config = {}, params) => {
    return axiosservice.get(url, {
      params,
      responseType: 'json',
      transformResponse: [
        data => {
          const parsedData = typeof data === 'string' ? JSON.parse(data) : data;
          return get(parsedData);
        },
      ],
      ...config,
    })
      .then()
      .catch(error => {
        return Promise.reject(error);
      });
  },
}