next.js 重定向时防止页面 Flink

daupos2t 于 2023-04-11 发布在 Flink

关注(0)|答案(1)|浏览(188)

我有一个验证页面和状态检查页面。我希望能够检查谁登录的用户，如果他/她的状态是一个布尔（string）。但是，每当用户成功登录时，它会转到("/")或页面的 Jmeter 板，其中只有经过身份验证并且在isEmailVerified和isVerified中具有true字段的用户才能看到它在云消防站。
route.js

export function withProtected(Component) {
  return function withProtected(props) {
    const auth = useAuth();
    const router = useRouter();
    var isEmailVerified;
    var isAdminVerified;
    async function readData() {
      // getUuid is from useAuth() in my AuthService.js
      const docRef = doc(db, "admins", auth.getUuid);
      const docSnap = await getDoc(docRef);

      if (docSnap.exists()) {
        isEmailVerified = docSnap.data()["isEmailVerified"];
        isAdminVerified = docSnap.data()["isVerified"];

        if (auth.getUuid && isEmailVerified == "false") {
          console.log("Verify Email Page Pushed!!!!");
          Router.push("/components/VerifyEmailPage");
          return <h1>GO TO VERIFY EMAIL PAGE</h1>;
        } else if (auth.getUuid && isAdminVerified == "false") {
          console.log("pushed!");
          Router.push("/components/AdminRequestStatus");
          return <h1>GO TO ADMIN STATUS CHECKER PAGE</h1>;
        }
      } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
      }
    }
    useEffect(() => {
      readData();
    }, []);

    return <Component auth={auth} {...props} />;
  };
}

下面是我的route.js文件的导入

import Router, { useRouter, asPath } from "next/router";
import React, { useEffect, useState } from "react";
import { useAuth } from "../utilities/AuthService";
import { db } from "../utilities/firebase-config";
import { doc, getDoc, onSnapshot, query } from "firebase/firestore";
import AdminRequestStatus from "./AdminRequestStatus";
import VerifyEmailPage from "./VerifyEmailPage";

这里是VerifyPage，当isEmaiVerified的值仍然为false时，应该重定向到这里，我 Package 了我创建withProtected的函数的Page

import React from "react";
import Head from "next/head";
import { withProtected } from "./route";
import Header from "./Header";

function VerifyEmailPage() {
  return (
    <div>
      <Head>
        <title>Verify Email Page</title>
      </Head>
      <Header></Header>
    </div>
  );
}

// I wrapped the VerifyEmailPage with the withProtected function 
// that I created..
export default withProtected(VerifyEmailPage);

我对react.js和next.js比较陌生，所以希望您能提出一些见解和想法。谢谢。

next.js

来源：https://stackoverflow.com/questions/75786885/preventing-flashing-of-page-when-redirecting

1条答案

按热度按时间

bvjveswy1#

您可以引入一个初始状态为true的加载状态，并在每次完成从firestore查询加载数据时将此状态更改为false，而不是解决重定向时 Flink 的问题。
你可以这样做：

import { useState, useEffect } from "react";
import Router from "next/router";
import { useAuth } from "../utilities/AuthService";

export function withProtected(Component) {
  return function withProtected(props) {
    const auth = useAuth();
    const [loading, setLoading] = useState(true);

    async function readData() {
      const docRef = doc(db, "admins", auth.getUuid);
      const docSnap = await getDoc(docRef);

      if (docSnap.exists()) {
        const isEmailVerified = docSnap.data()["isEmailVerified"];
        const isAdminVerified = docSnap.data()["isVerified"];

        if (auth.getUuid && isEmailVerified === false) {
          Router.push("/components/VerifyEmailPage");
        } else if (auth.getUuid && isAdminVerified === false) {
          Router.push("/components/AdminRequestStatus");
        }
      } else {
        console.log("No such document!");
      }
      setLoading(false);
    }

    useEffect(() => {
      readData();
    }, []);

    if (loading) {
      return <h1>Loading...</h1>; //you can also create loading component
    }

    return <Component auth={auth} {...props} />;
  };
}

您也可以使用一些旋转加载组件，使其更干净。

赞(0）回复(0）举报 2023-04-11

我来回答

next.js 重定向时防止页面 Flink

1条答案

相关问题

热门标签

最新问答