0

我正在尝试从我的中间件中的 localStorage 获取授权标头。不幸的是，这在第一个页面加载时不起作用，因为它是服务器渲染的。

我该如何解决这个问题？

const cookieName = 'feathers-jwt';
import { ApolloClient, createNetworkInterface } from 'apollo-client';
import 'isomorphic-fetch';

const API_ENDPOINT = 'http://localhost:3000/graphql';

const networkInterface = createNetworkInterface({ uri: API_ENDPOINT });

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    req.options.headers['authorization'] = window.localStorage.getItem(cookieName);
    next();
  }
}]);

const apolloClient = new ApolloClient({
  networkInterface,
  transportBatching: true
});

export default apolloClient;

来源：http ://dev.apollodata.com/core/network.html

4

1 回答 1

1

据我了解，当您在服务器上进行渲染时，您无法访问window和document. 在服务器和客户端都呈现的应用程序中，您需要构建检查以查看您所在的位置，并相应地进行处理。

您可以使用此代码段来检测您的位置：

var canUseDOM = !!(
  typeof window !== 'undefined' &&
  window.document &&
  window.document.createElement
)

使用它来检查您是在运行服务器端还是客户端。在您的情况下，我会执行以下操作：

  1. 如果您是服务器端，则可以检查 HTTP 请求本身中的 cookie；
  2. 如果您是客户端，则可以localStorage改为检查您的商店。

当然，您始终可以选择在服务器端默认将您的网站呈现为匿名未授权用户。但这会导致前端闪烁进入和退出授权状态，并且会让用户感到烦恼。

在您的情况下，我会尝试从您的 HTTP 请求中存在的实际 cookie 中查找授权 cookie。

于 2017-07-27T11:58:58.980 回答