NextJS中文文档 - Unauthorized
unauthorized
函数抛出一个错误,用于渲染 Next.js 401 错误页面。它对于处理应用程序中的授权错误非常有用。你可以使用 unauthorized.js
文件自定义用户界面。
要开始使用 unauthorized
,请在 next.config.js
文件中启用实验性的 authInterrupts
配置选项:
ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
authInterrupts: true,
},
}
export default nextConfig
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
js
module.exports = {
experimental: {
authInterrupts: true,
},
}
1
2
3
4
5
2
3
4
5
unauthorized
可以在服务器组件、服务器操作和路由处理程序中调用。
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 (
<main>
<h1>Welcome to the Dashboard</h1>
<p>Hi, {session.user.name}.</p>
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 (
<main>
<h1>Welcome to the Dashboard</h1>
<p>Hi, {session.user.name}.</p>
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
须知
unauthorized
函数不能在根布局中调用。
示例
向未认证用户显示登录界面
你可以使用 unauthorized
函数显示带有登录界面的 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 - Unauthorized</h1>
<p>Please log in to access this page.</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 - Unauthorized</h1>
<p>Please log in to access this page.</p>
<Login />
</main>
)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
使用服务器操作进行修改
你可以在服务器操作中调用 unauthorized
,以确保只有经过认证的用户才能执行特定的修改。
ts
'use server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'
export async function updateProfile(data: FormData) {
const session = await verifySession()
// 如果用户未认证,返回401
if (!session) {
unauthorized()
}
// 继续进行修改
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
js
'use server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'
export async function updateProfile(data) {
const session = await verifySession()
// 如果用户未认证,返回401
if (!session) {
unauthorized()
}
// 继续进行修改
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
使用路由处理程序获取数据
你可以在路由处理程序中使用 unauthorized
,以确保只有经过认证的用户才能访问该端点。
tsx
import { NextRequest, NextResponse } from 'next/server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
export async function GET(req: NextRequest): Promise<NextResponse> {
// 验证用户会话
const session = await verifySession()
// 如果不存在会话,返回401并渲染unauthorized.tsx
if (!session) {
unauthorized()
}
// 获取数据
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jsx
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
export async function GET() {
const session = await verifySession()
// 如果用户未认证,返回401并渲染unauthorized.tsx
if (!session) {
unauthorized()
}
// 获取数据
// ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
版本历史
版本 | 变更 |
---|---|
v15.1.0 | 引入 unauthorized 。 |