NextJS中文文档 - Unauthorized
unauthorized 文件用于在认证过程中调用 unauthorized
函数时渲染 UI。除了允许你自定义 UI 外,Next.js 还将返回 401
状态码。
tsx
import Login from '@/app/components/Login'
export default function Unauthorized() {
return (
<main>
<h1>401 - 未授权</h1>
<p>请登录以访问此页面。</p>
<Login />
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
jsx
import Login from '@/app/components/Login'
export default function Unauthorized() {
return (
<main>
<h1>401 - 未授权</h1>
<p>请登录以访问此页面。</p>
<Login />
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
参考
Props
unauthorized.js
组件不接受任何 props。
示例
向未认证用户显示登录 UI
你可以使用 unauthorized
函数来渲染带有登录 UI 的 unauthorized.js
文件。
tsx
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
export default async function DashboardPage() {
const session = await verifySession()
if (!session) {
unauthorized()
}
return <div>Dashboard</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
jsx
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
export default async function DashboardPage() {
const session = await verifySession()
if (!session) {
unauthorized()
}
return <div>Dashboard</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
tsx
import Login from '@/app/components/Login'
export default function UnauthorizedPage() {
return (
<main>
<h1>401 - 未授权</h1>
<p>请登录以访问此页面。</p>
<Login />
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
jsx
import Login from '@/app/components/Login'
export default function UnauthorizedPage() {
return (
<main>
<h1>401 - 未授权</h1>
<p>请登录以访问此页面。</p>
<Login />
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
版本历史
版本 | 变更 |
---|---|
v15.1.0 | 引入 unauthorized.js 。 |