Ich habe einen Fall, in dem ich wissen muss, ob der Benutzer angemeldet ist oder nicht, bevor die Seite serverseitig gerendert und mit Next.js an mich zurückgesendet wird, um flimmernde Änderungen in der Benutzeroberfläche zu vermeiden.
Ich konnte herausfinden, wie verhindert werden kann, dass der Benutzer auf einige Seiten zugreift, wenn er bereits mit dieser HOC-Komponente angemeldet ist ...
export const noAuthenticatedAllowed = (WrappedComponent: NextPage) => {
const Wrapper = (props: any) => {
return <WrappedComponent {...props} />;
};
Wrapper.getInitialProps = async (ctx: NextPageContext) => {
let context = {};
const { AppToken } = nextCookie(ctx);
if (AppToken) {
const decodedToken: MetadataObj = jwt_decode(AppToken);
const isExpired = () => {
if (decodedToken.exp < Date.now() / 1000) {
return true;
} else {
return false;
}
};
if (ctx.req) {
if (!isExpired()) {
ctx.res && ctx.res.writeHead(302, { Location: "/" });
ctx.res && ctx.res.end();
}
}
if (!isExpired()) {
context = { ...ctx };
Router.push("/");
}
}
const componentProps =
WrappedComponent.getInitialProps &&
(await WrappedComponent.getInitialProps(ctx));
return { ...componentProps, context };
};
return Wrapper;
};
Und das funktioniert super.
Wie kann ich nun eine ähnliche HOC-Komponente erstellen, um sie zu umschließen? Sagen wir "_app.tsx", damit ich "userAuthenticated" an jede einzelne Seite übergeben kann, indem ich das Token erhalte und herausfinde, ob es abgelaufen ist oder nicht und basierend auf diese Requisite kann ich dem Benutzer die richtige Benutzeroberfläche zeigen, ohne diesen störenden Flackereffekt?
Ich hoffe, Sie können mir dabei helfen. Ich habe versucht, es auf die gleiche Weise zu tun, wie ich das obige HOC erstellt habe, aber ich konnte es nicht tun, insbesondere, dass Typescript dies mit seinen seltsamen Fehlern nicht einfacher macht :(
Edit == ==========================================
Ich konnte eine solche HOC-Komponente erstellen und den Profi wie folgt userAuthenticated
an jede Seite weitergeben ...
export const isAuthenticated = (WrappedComponent: NextPage) => {
const Wrapper = (props: any) => {
return <WrappedComponent {...props} />;
};
Wrapper.getInitialProps = async (ctx: NextPageContext) => {
let userAuthenticated = false;
const { AppToken} = nextCookie(ctx);
if (AppToken) {
const decodedToken: MetadataObj = jwt_decode(AppToken);
const isExpired = () => {
if (decodedToken.exp < Date.now() / 1000) {
return true;
} else {
return false;
}
};
if (ctx.req) {
if (!isExpired()) {
// ctx.res && ctx.res.writeHead(302, { Location: "/" });
// ctx.res && ctx.res.end();
userAuthenticated = true;
}
}
if (!isExpired()) {
userAuthenticated = true;
}
}
const componentProps =
WrappedComponent.getInitialProps &&
(await WrappedComponent.getInitialProps(ctx));
return { ...componentProps, userAuthenticated };
};
return Wrapper;
};
Ich musste jedoch jede einzelne Seite mit diesem HOC userAuthenticated
umbrechen , um die Requisite an das globale Layout weiterzugeben, das ich habe, da ich die Klassenkomponente "_app.tsx" nicht damit umschließen konnte, gibt es immer einen Fehler. ..
Das funktioniert ...
export default isAuthenticated(Home);
export default isAuthenticated(about);
Aber das tut es nicht ...
export default withRedux(configureStore)(isAuthenticated(MyApp));
Es ist also etwas ärgerlich, dies für jede einzelne Seite tun zu müssen und dann die Requisite an das globale Layout auf jeder Seite weiterzugeben, anstatt es nur einmal in der "_app.tsx" zu tun.
Ich vermute, der Grund könnte sein, dass "_app.tsx" eine Klassenkomponente und keine Funktionskomponente wie der Rest der Seiten ist. Ich weiß nicht, ich rate nur.
Hilfe dabei?
quelle
ReactJS
folgt weder der funktionalen Programmierung noch der OOP, aber ich sehe die Denkweise der Backend-Entwicklung in Ihrem Code mit OOP-Gedanken. Erben Sie eine neue Klasse von einer anderen Komponente! »Ich habe es vorher nicht so gesehen.