Next.js 使用中间件进行拦截验证 & getServerSideProps进行重定向

方法一：中间件

官方-中间件：nextjs.org/docs/messag…

在根目录下编写middleware.ts

// 写在<root>/middleware.ts下

import { NextResponse, NextRequest } from 'next/server'
const middleware = (req: NextRequest, res: NextResponse) => {
      const loginUrl = new URL('/error/404', req.url)
      if (req.nextUrl.pathname.startsWith('/creator')){
            // loginUrl.searchParams.set('from', req.nextUrl.pathname)
            return NextResponse.redirect(loginUrl)
      }
      return;
};
export default middleware;

注意

1. 不能使用"next/router"来实现重定向
2. 升级后的next.js 没有嵌套的中间件(即page/_middleware.ts)
3. 不同的路径使用req.nextUrl.pathname.startsWith('/creator')来进行判断

方法二：getServerSideProps

官方-getServerSideProps：nextjs.org/docs/pages/…

1. 第一种：直接使用getServerSideProps 页面代码(page/demo.jsx)

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  if (!data) {
    return {
      redirect: {
        destination: '/', // 重定向到首页
        permanent: false,
      },
    }
  }
 
  return {
    props: {}, // will be passed to the page component as props
  }
}

2. 使用中间件(同样是在getServerSideProps中实现重定向)

页面代码

import authMiddleware from './authMiddleware';

const ProtectedPage = () => {
      // 页面内容
      return <div>Protected Page</div>;
};

// 使用中间件进行验证
export const getServerSideProps = authMiddleware((data) => {
      console.log("data",data);
      if (!data) {
            return {
                  redirect: {
                        destination: '/', // 重定向到首页
                        permanent: false,
                  },
            }
      }

      return {
            props: {}, // will be passed to the page component as props
      }
});

export default ProtectedPage;

中间件代码

// authMiddleware.js

import { useRouter } from 'next/router';

const authMiddleware = (handler) => (req, res) => {
      // 在这里进行验证逻辑，例如检查用户是否已登录或具有特定权限
      const isAuthenticated = fetch('http://localhost:3000/api/hello').json()
      console.log("hello");
      return handler(isAuthenticated)
};

export default authMiddleware;