保护资源

保护路由通常可以通过检查会话并在未找到活动会话时采取操作来完成，例如将用户重定向到登录页面或简单地返回 401: 未经授权 响应。

页面

您可以使用从 NextAuth() 返回并在您的 auth.ts 或 auth.js 配置文件中导出的 auth 函数来获取会话对象。

app/server/page.tsx

import { auth } from "@/auth"
 
export default async function Page() {
  const session = await auth()
  if (!session) return <div>Not authenticated</div>
 
  return (
    <div>
      <pre>{JSON.stringify(session, null, 2)}</pre>
    </div>
  )
}

要保护 Next.js 页面路由器中的页面，我们可以在 getServerSideProps 中使用 auth 将 session 作为 props 返回到页面。

./pages/dashboard.tsx

import { auth } from "../auth"
 
export default function Dashboard({ session }) {
  if (!session.user) return <div>Not authenticated</div>
 
  return <div>{JSON.stringify(session, null, 2)}</div>
}
 
export async function getServerSideProps(ctx) {
  const session = await auth(ctx)
 
  return {
    props: {
      session,
    },
  }
}

要使用 useSession() 客户端访问会话，请确保 <SessionProvider /> 正在包装您的应用程序。

./pages/_app.tsx

import type { AppProps } from "next/app"
import { SessionProvider } from "next-auth/react"
 
export default function MyApp({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />;
    </SessionProvider>
  )
}

在组件$ 中，您可以使用 useSession 加载程序检索当前会话存储。

import { component$ } from '@builder.io/qwik';
import { useSession } from '~/routes/plugin@auth';
 
export default component$(() => {
  const session = useSession();
  return <p>{session.value?.user?.email}</p>;
});

在 SvelteKit 中，您可以利用由 Auth.js handle 函数提供的 event.locals.auth() 函数，我们正在导入并在 hooks.server.ts 中使用它。

通过在服务器端调用 event.locals.auth()，我们可以在任何 +page.server.ts 或 +layout.server.ts 文件中检查会话，并允许请求继续，或重定向到 /login 页面，例如。

src/routes/dashboard/+page.server.ts

import { fail, redirect } from "@sveltejs/kit"
import type { PageServerLoad } from "./$types"
 
export const load: PageServerLoad = async (event) => {
  const session = await event.locals.auth()
 
  if (!session?.user?.userId) {
    return fail(401, { type: "error", error: "Unauthenticated" })
  }
 
  return {
    session,
  }
}

您可以通过检查会话是否存在，然后在会话不存在时重定向到登录页面来保护路由。这可以针对每个路由或针对使用以下中间件的一组路由进行，例如

lib.ts

import { getSession } from "@auth/express"
 
export async function authenticatedUser(
  req: Request,
  res: Response,
  next: NextFunction
) {
  const session = res.locals.session ?? (await getSession(req, authConfig))
  if (!session?.user) {
    res.redirect("/login")
  } else {
    next()
  }
}

app.ts

import { authenticatedUser } from "./lib.ts"
 
// This route is protected
app.get("/profile", authenticatedUser, (req, res) => {
  const { session } = res.locals
  res.render("profile", { user: session?.user })
})
 
// This route is not protected
app.get("/", (req, res) => {
  res.render("index")
})
 
app.use("/", root)

API 路由

可以使用 auth 导出在各种框架中保护 API 路由。

在 Next.js 中，您可以使用 auth 函数包装 API 路由处理程序。然后请求参数将具有一个 auth 键，您可以检查它是否有有效的会话。

./app/api/admin/route.ts

import { auth } from "@/auth"
import { NextResponse } from "next/server"
 
export const GET = auth(function GET(req) {
  if (req.auth) return NextResponse.json(req.auth)
  return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
})

./pages/api/admin.ts

// TODO: Update once server-side API methods are implemented for pages router again
 
// import { auth } from "../../auth"
// import { getSession } from "next-auth/react"
import { NextApiRequest, NextApiResponse } from "next"
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // const session = await auth(req, res)
  // const session = await getSession(req, res)
  const url = `${req.headers["x-forwarded-proto"]}://${req.headers.host}/api/auth/session`
 
  const sessionRes = await fetch(url)
  const session = await sessionRes.json()
 
  if (!session.user) {
    return res.status(401).json({ message: "Not authenticated" })
  }
 
  return res.json({ data: "Protected data" })
}

会话数据可以通过路由事件 sharedMap 访问。因此，可以保护路由并使用以下内容进行重定向，该内容位于 layout.tsx 或页面索引 index.tsx 中

export const onRequest: RequestHandler = (event) => {
  const session = event.sharedMap.get("session")
  if (!session || new Date(session.expires) < new Date()) {
    throw event.redirect(302, `/`)
  }
}

SvelteKit 中的 API 路由与 Auth.js 中的任何其他服务器端文件一样，您也可以通过在 +server.ts 文件中调用 event.locals.auth() 来访问会话。

src/routes/api/users/+server.ts

import type { RequestHandler } from "./$types"
 
export const GET: RequestHandler = async (event) => {
  const session = await event.locals.auth()
 
  if (!session?.user?.userId) {
    return new Response(null, { status: 401, statusText: "Unauthorized" })
  }
}

Next.js 中间件

使用 Next.js 12+，保护一组页面的最简单方法是使用中间件文件。您可以在根页面目录中创建一个 middleware.ts 文件，其中包含以下内容。

middleware.ts

export { auth as middleware } from "@/auth"

然后在您的 auth.ts 文件中定义 authorized 回调。有关更多详细信息，请查看参考文档。

auth.ts

import NextAuth from "next-auth"
 
export const { auth, handlers } = NextAuth({
  callbacks: {
    authorized: async ({ auth }) => {
      // Logged in users are authenticated, otherwise redirect to login page
      return !!auth
    },
  },
})

如果您想在中间件中实现更多逻辑，也可以使用 auth 方法作为包装器。

middleware.ts

import { auth } from "@/auth"
 
export default auth((req) => {
  if (!req.auth && req.nextUrl.pathname !== "/login") {
    const newUrl = new URL("/login", req.nextUrl.origin)
    return Response.redirect(newUrl)
  }
})

您也可以使用正则表达式匹配多个路由，或者否定某些路由以保护所有剩余路由。以下示例避免在 favicon 或静态图像等路径上运行中间件。

middleware.ts

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
}

中间件将根据 matcher 配置导出定义的页面进行保护。有关匹配器的更多详细信息，请查看 Next.js 文档。

💡

您不应仅依靠中间件进行授权。始终确保尽可能接近您的数据获取来验证会话。

获取会话自定义页面

保护资源

页面

API 路由

Next.js 中间件

关于 Auth.js

下载

鸣谢