对 Amazon Cognito 的每个 page.tsx 使用 withAuthenitcationProps

Question

我有一个 nextjs 应用程序，以下是我的项目的示例结构：

├── README.md
├── amplify
│   ├── #current-cloud-backend
│   ├── README.md
│   ├── auth
│   ├── backend
│   ├── cli.json
│   ├── hooks
│   └── team-provider-info.json
├── app
│   ├── ConfigureAmplify.tsx
│   ├── amplifyconfiguration.json
│   ├── aws-exports.js
│   ├── dashboard
│   ├── layout.tsx
│   ├── lib
│   ├── page.tsx
│   └── ui
├── next-env.d.ts
├── next.config.js
├── node_modules

我的 /app/page.tsx 是：

"use client";


import { Amplify } from 'aws-amplify';
import type { WithAuthenticatorProps } from '@aws-amplify/ui-react';
import { Button, withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

export function Page({ signOut, user }: WithAuthenticatorProps) {
  return (
    <main className="flex min-h-screen flex-col p-6">
      <h1>MAIN PAGE/LOGIN PAGE</h1>
      <h1>Hello {user?.username}</h1>
      <Button onClick={signOut}>Sign out</Button>
    </main>
  );
}

export default withAuthenticator(Page);

如果我转到路由 localhost:3000 我必须登录。 但是，如果我转到路由 localhost:3000/dashboard，即使我没有登录，仪表板页面也会加载。

有办法解决这个问题吗？

Answer 1

嗨，我为其他遇到类似问题的人找到了解决方案，您想在 app/layout.tsx 而不是 page.tsx 中使用

import { Authenticator } from '@aws-amplify/ui-react';

组件，因为它将该布局应用于所有子组件。