如何在 Next.js + Redux-saga 中刷新 window 时设置授权 header？

Question

I am trying to set Authorization header with JWT Bearer token.

When refresh window, header is reset. I set header when "componentDidMount" from localstorage, but much repeated and get undefined localstorage from pre-rendering.

axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('accesstoken');

How and where can add global function that set header with value of localstorage? or any other Good solution?

Answer 1

I see from your question that you're using redux-saga ,so instead of having this logic in componentDidMount you can implement auth flow saga that is responsible for setting JWT token in api client and will be invoked during the app bootstrap:

function* authSaga() {
  // This part will be invoked only once during the app startup
  const token = JSON.parse(localStorage.getItem('accessToken'));
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  }

  // Further auth flow logic goes here
  while(true) {
    if (!token) {
      const { payload } = yield take(SIGN_IN_ACTION);
      yield call(axios.post, '/your-sign-in-endpoint', payload);
    }

    yield take(SIGN_OUT_ACTION);
     // etc
  }
}

function* rootSaga() {
  yield all([
    fork(saga1),
    fork(saga2),
    ...
    fork(authSaga),
  ]);
}

In addition, I highly recommend you to refer to this thread which contains great authentication flow recipes using redux-saga.