首页 > 解决方案 > 如何正确设置授权标头?

问题描述

问题:

在我的本机应用程序中,为了消除重复调用,我在 httpClient 文件中开发了一个通用的 POST GET 方法。它的代码看起来像这样。

import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';

axios.defaults.headers.post['Content-Type'] = 'application/json';

var instance = null;

const setAuthorisationHeder = async () => {
  const token = JSON.parse(await AsyncStorage.getItem('auth_data'));
  if (token) {
    console.log('>>>>>> instance', instance);
    Object.assign(instance.headers, {
      Authorization: 'Bearer' + token.accessToken,
    });
  } else {
    console.log('>>>>>> instance', instance);
    Object.assign(instance.headers, {
      Authorization: '',
    });
  }
};

export const setHeader = () => {
  console.log('>>>>>>>> HIIII');
  instance = axios.create({
    baseURL: '',
    timeout: 150000,
    headers: {
      'Content-Type': 'application/json',
    },
  });
  instance.interceptors.response.use(
    function (response) {
      return response;
    },
    async function (error) {
      if (error.response.status) {
        if (error.response.status === 401) {
          AsyncStorage.removeItem('auth_data');
        } else {
          throw error;
        }
      } else {
        console.log(error);
      }
    },
  );
};

export const Get = (route, data) => {
  function getData() {
    return instance.get(
      route,
      data == null ? {data: {}} : {data: JSON.stringify(data)},
    );
  }
  if (instance) {
    console.log('>>>>>> HIIIIii');
    // setAuthorisationHeder();
    return getData();
  }
  return setHeader().then(getData);
};

export const Post = (route, data) => {
  console.log('>>>>>> route', route);
  function postData() {
    return instance.post(route, JSON.stringify(data));
  }
  if (instance) {
    console.log('>>>>>> HIIIIii');
    // setAuthorisationHeder();
    // setAuthorisationHeder();
    return postData();
  }

  return setHeader().then(postData);
};

有人可以告诉我一种向此实例添加授权标头的方法吗?我的令牌将 Asyncstorage 存储在一些操作的中间,所以在开始调用时我没有令牌。由于我的代码 setHeader 只运行一次,所以我创建了一个方法调用 setAuthorisationHeder() 函数。但是当我提出请求时,它给了我找不到属性。然后错误。有人可以帮我解决这个问题吗?谢谢?

标签: react-native

解决方案


you can define global headers once and use it in every network call.

https://github.com/axios/axios#global-axios-defaults


推荐阅读