Nuxt 窗口未在服务器端渲染中定义

Question

我正在尝试从中间件中的本地存储获取授权标头。不幸的是，这在第一次页面加载时不起作用，因为它是服务器呈现的。

我该如何解决这个问题？

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
)

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

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

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

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