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

Question

我正在尝试使用 JWT Bearer 令牌设置授权 header。

刷新window时，header被重置。当 "componentDidMount" 来自 localstorage 时，我设置了 header，但多次重复并从 pre-rendering.

获得未定义的 localstorage

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

如何以及在何处添加全局函数，将 header 设置为 localstorage 的值？或任何其他好的解决方案？

Answer 1

我从你的问题中看出你正在使用 redux-saga，因此你可以实现负责在 [=18] 中设置 JWT 令牌的身份验证流程传奇，而不是在 componentDidMount 中使用此逻辑=] 客户端并将在应用期间调用 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),
  ]);
}

此外，我强烈建议您参考 this thread，其中包含使用 redux-saga 的出色身份验证流程配方。

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

How to set Authorization header when refresh window in Next.js + Redux-saga?

javascript

prerender

redux-saga

react-redux

next.js