在下一步中有条件地执行'getInitialProps'.js

Question

我使用useContext和useReducer进行全局状态管理 我想检查用户是否经过身份验证。 为此，我想到的是，以这种方式检查内部getInitialProps：

DashboardPage.getInitialProps = async () => {
const [globalState, dispatch] = useContext(STORE.storeContext);
let auth = globalState.isAuthed
if (!auth) {
auth = axiox.get('/authenticateThisUser');
} 
return {
auth,
}
}

但是，当我执行此代码片段时，它会抛出Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 如何在getInitialProps中使用useContext？

我正在寻找一种防止组件将冗余身份验证请求发送到 服务器。

如果有一些方法可以有条件地执行getInitialProps那就太好了 喜欢这个：

if(globalState.isAuthed){
//dont execute getInitialProps of this component
}else {
//execute getInitialProps of this component
}

Answer 1

实际上，我想完成的事情可以使用下面的代码来完成：

DashboardPage.getInitialProps = async ({ req, query, asPath }) => {
// only in server-side
if (req) {
const userUrl = `http://localhost:3000${userConfig.ROUTES.user.getUser}`;
const isMeUrl = `http://localhost:3000${userConfig.ROUTES.isMe}`;
const result = await axios.all([axios.get(isMeUrl), axios.get(userUrl)]);
return {
me: result[0].data.payload,
user: result[1].data.payload,
};
}
// only in client-side
// since we've done authenticating, it is set in the global state management
// therefore, no need to send any request to the auth API endpoint.
return {};
};

通过这种方式，我们确保身份验证请求仅在服务器端发送(第一个请求(，并防止组件发送冗余请求。