Nuxt window 未在 server-side 渲染上定义

Question

我正在尝试从我的中间件中的 localStorage 获取授权 headers。不幸的是，这在第一页加载时不起作用，因为它是 server-rendered.

我该如何解决这个问题？

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 window 未在 server-side 渲染上定义

Nuxt window is not defined on server-side rendering

server-rendering

vue-server-renderer

apollo-client

nuxt.js