在 Next.js + Redux-saga 中刷新窗口时如何设置授权标头？答案

【问题标题】：How to set Authorization header when refresh window in Next.js + Redux-saga?在 Next.js + Redux-saga 中刷新窗口时如何设置授权标头？
【发布时间】：2020-08-30 10:07:05
【问题描述】：

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

刷新窗口时，标题被重置。我在 localstorage 中设置了“componentDidMount”时的标题，但是重复了很多并且从预渲染中获得了未定义的 localstorage。

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

如何以及在哪里可以添加全局函数来设置标头与本地存储的值？或任何其他好的解决方案？

【问题讨论】：

所以问题是localStorage有时会给出未定义的？
您能否说明将accesstoken 设置为localStorage 的逻辑？
登录时，后端api返回token，然后localStorage.setItem('accesstoken ', res.token)
@Davo 是的，我有时会得到未定义的本地存储。除了 localStorage ，还有什么东西可以保留 auth token 吗？
@DmytroMyronenko 饼干？

标签： javascript react-redux next.js redux-saga prerender

【解决方案1】：

我从您的问题中看到您正在使用redux-saga，因此您可以实现负责在 api 客户端中设置 JWT 令牌并将在应用程序期间调用的身份验证流传奇，而不是在 componentDidMount 中使用此逻辑引导：

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 的出色身份验证流程配方。

【讨论】：

谢谢，刷新页面时出现错误ReferenceError: localStorage is not defined。
浏览器是否出现此错误？还是在 node.js 环境下？
在浏览器中。我认为它来自服务器端渲染
显然localStorage在node环境下是不可用的。然后你必须使用cookies来存储访问令牌。