Question

我正在尝试从我的中间件中的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

Answer 1

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

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

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

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

如果您是服务器端，则可以检查HTTP请求本身的cookie;
如果您是客户端，则可以检查您的localStorage商店。

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

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

服务器端呈现中未定义Nuxt窗口

1 个答案: