regex 在字符串数组中存储动态URL

jogvjijk  于 2023-03-31  发布在  其他
关注(0)|答案(2)|浏览(112)

我正在开发一个带有身份验证的Next.js项目,并将一些URL作为字符串放入一个名为protectedRoutes的数组中,这样人们在登录之前访问这些URL时就会被重定向。

const protectedRoutes = ["/home", "/profile", etc.];

我还在我的项目中展示了一些帖子,每个帖子都有自己的页面。每个帖子都有一个存储在firebase中的唯一id,我已经在Next.js中设置了路由器查询。
假设我有一个post.id==“BjPDBvsWIsa 11 l 6 JxFOAgzR 3 mnG 3”,那么它的URL将是/post/BjPDBvsWIsa 11 l 6 JxFOAgzR 3 mnG 3。
我的问题是,我如何将每个帖子的URL存储到protectedRoutes数组中?有没有一种方法可以用Regex做到这一点?
非常感谢。

const postURL = new RegExp("/post/")
const protectedRoutes = ["/home", "/profile", postURL];

是行不通的。
编辑29/3:
我还希望避免以下情况:

const postID = getPostID() // function that fetches post IDs from firebase

postID.forEach((id) => {
  protectedRoutes.push(`/post/${id}`);
});

这样可以避免在帖子数量增加时创建一个长数组,这会减慢搜索速度。
编辑30/3:
下面显示了包含protectedRoutes的文件和处理重定向的组件。
在my_app. js中,

import PrivateRoute from "@/components/PrivateRoute";
import { AuthProvider } from "@/contexts/AuthContext";
import "@/styles/globals.css";

export default function App({ Component, pageProps }) {
  const protectedRoutes = ["/home", "/profile"];
  const publicRoutes = [
    "/",
    "/sign-in",
    "/sign-in/phone",
    "/sign-up",
    "/reset-password",
  ];

  return (
    <AuthProvider>
      <PrivateRoute
        protectedRoutes={protectedRoutes}
        publicRoutes={publicRoutes}
      >
        <Component {...pageProps} />
      </PrivateRoute>
    </AuthProvider>
  );
}

在我的PrivateRoute.jsx中

import { useEffect } from "react";
import { useRouter } from "next/router";

import { useAuth } from "@/contexts/AuthContext";
import FullPageLoader from "./FullPageLoader";

export default function PrivateRoute({
  protectedRoutes,
  publicRoutes,
  children,
}) {
  const router = useRouter();
  const { currentUser, loading } = useAuth();

  const pathIsProtected = protectedRoutes.indexOf(router.pathname) !== -1;
  const pathIsPublic = publicRoutes.indexOf(router.pathname) !== -1;

  useEffect(() => {
    if (!loading && !currentUser && pathIsProtected) {
      router.push("/sign-in");
    }

    if (!loading && currentUser && pathIsPublic) {
      router.push("/home");
    }
  }, [currentUser, loading, pathIsProtected, pathIsPublic]);

  if ((loading || !currentUser) && pathIsProtected) {
    return <FullPageLoader />;
  }

  if ((loading || currentUser) && pathIsPublic) {
    return <FullPageLoader />;
  }

  return children;
}
5t7ly7z5

5t7ly7z51#

测试跟随代码

const url1 = '/post/dadsa'
  const url2 = '/post/sdadasdas/dadsa'
  const url3 = '/postsdadasdas/dadsa'
  const url4 = '/'
  const url5 = ''

  const getRealPath = (url) => url.split('/').filter(v=>v!=='')[0] ? '/' + url.split('/').filter(v=>v!=='')[0] : url

  console.log(getRealPath(url1))
  console.log(getRealPath(url2))
  console.log(getRealPath(url3))
  console.log(getRealPath(url4))
  console.log(getRealPath(url5))

编辑你的app.js,

const protectedRoutes = ["/home", "/profile", "/post"];

编辑您的PrivateRoute.jsx,

+ const getRealPath = (url) => url.split('/').filter(v=>v!=='')[0] ? '/' + url.split('/').filter(v=>v!=='')[0] : url

- const pathIsProtected = protectedRoutes.indexOf(router.pathname) !== -1;
+ const pathIsProtected = protectedRoutes.indexOf(getRealPath(router.pathname)) !== -1;
lxkprmvk

lxkprmvk2#

const protectedRoutes = ["/home", "/profile", etc.];

// Create \/home|\/profile|etc.
const strRegProtected = protectedRoutes.join('|').replace(/\//g, '\\/')

// Create /^(\/home|\/profile|etc.)/
const regProtected = RegExp(`^(${strRegProtected})`)

const isUrlProtected = regProtected.test('/home/85948')

相关问题