半官方的例子
这些with-cookie-auth
示例在中重定向getInitialProps
。我不确定这是否是有效的模式,但这是代码:
Profile.getInitialProps = async ctx => {
const { token } = nextCookie(ctx)
const apiUrl = getHost(ctx.req) + '/api/profile'
const redirectOnError = () =>
typeof window !== 'undefined'
? Router.push('/login')
: ctx.res.writeHead(302, { Location: '/login' }).end()
try {
const response = await fetch(apiUrl, {
credentials: 'include',
headers: {
Authorization: JSON.stringify({ token }),
},
})
if (response.ok) {
const js = await response.json()
console.log('js', js)
return js
} else {
// https://github.com/developit/unfetch#caveats
return await redirectOnError()
}
} catch (error) {
// Implementation or Network error
return redirectOnError()
}
}
它同时处理服务器端和客户端。该fetch
调用实际上是获得auth令牌的调用,您可能希望将此封装为一个单独的函数。
我会建议
1.在服务器端渲染上重定向(避免在SSR期间使用Flash)
这是最常见的情况。您要在此时进行重定向,以避免初始页面在首次加载时闪烁。
MyApp.getInitialProps = async appContext => {
const currentUser = await getCurrentUser(); // define this beforehand
const appProps = await App.getInitialProps(appContext);
// check that we are in SSR mode (NOT static and NOT client-side)
if (typeof window === "undefined" && appContext.ctx.res.writeHead) {
if (!currentUser && !isPublicRoute(appContext.router.pathname)) {
appContext.ctx.res.writeHead(302, { Location: "/account/login" });
appContext.ctx.res.end();
}
}
return { ...appProps, currentUser };
};
2.在componentDidMount中重定向(在禁用SSR(例如在静态模式下)时很有用)
这是客户端渲染的后备。
componentDidMount() {
const { currentUser, router } = this.props;
if (!currentUser && !isPublicRoute(router.pathname)) {
Router.push("/account/login");
}
}
我无法避免在静态模式下刷新初始页面,请添加这一点,因为您无法在静态构建过程中进行重定向,但这似乎比通常的方法要好。我会在取得进展时尝试进行编辑。
完整的例子在这里
相关问题,可悲的是最终只能由客户回答