Exemple semi-officiel
Les with-cookie-auth
exemples redirigent vers getInitialProps
. Je ne sais pas si c'est un modèle valide ou pas encore, mais voici le code:
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()
}
}
Il gère à la fois côté serveur et côté client. L' fetch
appel est celui qui obtient réellement le jeton d'authentification, vous voudrez peut-être l'encapsuler dans une fonction distincte.
Ce que je conseillerais à la place
1. Rediriger le rendu côté serveur (éviter le flash pendant la SSR)
C'est le cas le plus courant. Vous souhaitez rediriger à ce stade pour éviter que la page initiale ne clignote lors du premier chargement.
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. Rediriger dans componentDidMount (utile lorsque SSR est désactivé, par exemple en mode statique)
Il s'agit d'un remplacement pour le rendu côté client.
componentDidMount() {
const { currentUser, router } = this.props;
if (!currentUser && !isPublicRoute(router.pathname)) {
Router.push("/account/login");
}
}
Je ne pouvais pas éviter de flasher la page initiale en mode statique, ajoutez ce point, car vous ne pouvez pas rediriger pendant la construction statique, mais cela semble mieux que les approches habituelles. Je vais essayer d'éditer au fur et à mesure que je progresse.
L'exemple complet est ici
Problème pertinent, qui se termine malheureusement par une réponse du client uniquement