Exemplo semioficial
Os with-cookie-auth
exemplos são redirecionados getInitialProps
. Não tenho certeza se é um padrão válido ou ainda não, mas aqui está o código:
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()
}
}
Ele lida com o servidor e com o cliente. A fetch
chamada é aquela que realmente obtém o token de autenticação; talvez você queira encapsular isso em uma função separada.
O que eu recomendaria
1. Redirecione na renderização do servidor (evite flash durante o SSR)
Este é o caso mais comum. Você deseja redirecionar neste momento para evitar que a página inicial pisque no primeiro carregamento.
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. Redirecionar em componentDidMount (útil quando o SSR está desativado, por exemplo, no modo estático)
Este é um substituto para a renderização do lado do cliente.
componentDidMount() {
const { currentUser, router } = this.props;
if (!currentUser && !isPublicRoute(router.pathname)) {
Router.push("/account/login");
}
}
Não pude evitar exibir a página inicial no modo estático. Adicione este ponto, porque você não pode redirecionar durante a compilação estática, mas parece melhor do que as abordagens usuais. Vou tentar editar à medida que progredir.
Exemplo completo está aqui
Problema relevante, que infelizmente acaba com uma resposta apenas do cliente