我有一个应用程序,基本上是一个电子商务网站的管理门户。我认为这是最好的,用户不能访问任何路线,而首先被登录。我使用NextJS 13(与应用程序路由器)和next-auth。
我知道一些保护个别路线的方法。但是,有没有一种方法可以在没有用户登录时重定向任何和所有路由(在本例中,重定向到主页)。我想在以前,我们可以在NextJS的早期版本中使用_app.js组件来实现这一点。但是,我相信这不再是一个选项时,使用应用程序路由器。
下面是一个例子,我目前如何处理重定向时,没有用户:
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
const ProductsPage = () => {
const { data: session } = useSession();
const router = useRouter();
if (!session) {
router.push("/");
}
return (
<div>
<Link href="/products/new">
<button className="bg-gray-300 rounded-md py-1 px-2">
Add new product
</button>
</Link>
<table className="basic mt-4">
<thead>
<tr>
<td>Product</td>
<td></td>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product._id}>
<td>{product.name}</td>
<td>
<EditButton href={`/products/edit/${product._id}`} />
<DeleteButton href={`/products/delete/${product._id}`} />
</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default ProductsPage;
然而,我有一个很好的网页量,不想这样做的每一个单一的网页。这也会导致 Flink 。它首先呈现产品页面,然后在确定没有活动会话后重定向到主页。
1条答案
按热度按时间gv8xihay1#
你可以使用下一个js的Middleware.ts特性,并检查其中的authticketion和重定向。