如何使用静态方法将身份验证令牌传递给API类

Question

I wrote an API class that I use with redux saga to separate the actual network calls from the sagas, and that class looks somewhat like this:

    export default class ApiService {

        constructor(bearer) {
            this.instance = axios.create({
                ...
                headers: {
                    'Authorization': `Bearer ${bearer}`
                }
            })
        }

        fetchPosts = async () => {
            const response = this.instance.get(.....)
        }
        ........
    }

However in my sagas I have to instantiate a new object every time within a saga like this:

    const { accessToken } = yield select(getAuth)
    const apiService = new ApiService(accessToken);

Is there a better approach I could take with this so I can remove those 2 lines of code from every saga call and still make sure that the object will have the correct bearer token?

Thanks?

Answer 1

replace your bearer with a class variable:

export default class ApiService {

  constructor(bearer) {

    this.instance = axios.create({
      ...
      headers: {
        'Authorization': `Bearer ${ApiService.bearer}`
      }
    })
  }

  fetchPosts = async () => {
    const response = this.instance.get(.....)
  }
  ........
}

and somewhere just initialise it one time before you use it like this:

ApiService.bearer = "my bearer";

Answer 2

Try creating a function which returns new api service only if it's the first call or the token is updated.

api.js

let api;
let token;

const isNewToken = (newToken) => newToken !== token;
const getApi = (newToken) => {
  const isTokenUpdated = newToken !== token;
  const shouldCreateService = !api || isTokenUpdated;

  if (shouldCreateService) {
    api = new ApiService(newToken);
  }

  return api;
}

export { getApi }; 

Then create some helper generators

function* retrieveToken() {
  return yield select(getAuth);
}

function* resolveApi() {
  const token = yield retrieveToken();
  return getApi(token); // getApi from api.js
}

Then in your main sagas you can use it like this:

function* fetchPostsSaga() {
  const api = yield resolveApi();
  // Rest of code using api
  ...
}

---

Since the authorization token is stored in the Redux State the creation of the ApiService is bound to Redux lifecycle. If possible I would move retrieval of a token outside of Redux .