流程如下:
1.用户尝试通过表单登录
1.如果登录成功,则AuthContext
在用户配置文件信息中设置/持久化accessToken的cookie
1.中间件被配置为读取cookie并根据身份提供程序对其进行验证
1.如果有效,则允许用户通过。如果无效,则将用户重定向到登录页面。
Next docs说我可以为请求设置传出的客户端cookie(强调我的):
Cookie功能允许您从服务器组件读取HTTP传入请求Cookie,或在服务器操作或路由命令中写入传出请求Cookie。
我的Next.js应用程序具有以下结构:
<AuthContext>
<Layout>
<Page>
...
</Page>
</Layout>
</AuthContext>
字符串
当前代码:
// AuthProvider
"use client";
import { AuthContextType, AuthenticatedUser } from "@/app/@types/auth";
import { ReactNode, createContext, useState } from "react";
import { cookies } from "next/headers";
const AuthContext = createContext<AuthContextType | null>(null);
interface Props {
children?: ReactNode;
}
function AuthProvider({ children }: Props) {
const cookieJar = cookies();
function login(user, persist: boolean) {
const userJson = JSON.stringify({
uid: user.uid,
email: user.email,
emailVerified: user.emailVerified,
displayName: user.displayName,
refreshToken: user.stsTokenManager.refreshToken,
accessToken: user.stsTokenManager.accessToken,
expirationTime: user.stsTokenManager.expirationTime
});
cookieJar.set({
name: "auth",
value: userJson,
httpOnly: true,
expires: persist ? undefined : Infinity
});
}
... // Removed for brevity
}
// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export async function middleware(request: NextRequest) {
let valid = false;
// check validity
if (!valid)
return NextResponse.redirect(new URL('/auth/login', request.url))
}
export const config = {
matcher: '/dashboard/:path*',
}
的数据
这是我的问题和我不明白的地方。AuthContext
是客户端组件,而middleware.ts
(当前)是服务器组件(因为它正在导入next/headers
)。
如果我尝试按原样运行,由于AuthContext的createContext
,我会得到以下错误:
你正在导入一个需要next/header的组件。这只在服务器组件中有效,但是它的一个父组件被标记为“use client”,所以它是一个客户端组件。
如果我从AuthContext
中删除use client
,则会出现以下错误:
您正在导入一个需要使用客户端上下文的组件。它只能在客户端组件中工作,但它的父组件都没有标记为“使用客户端”,因此默认情况下它们是服务器组件。
我该如何解决此问题?具体来说,我如何设置cookie,然后使用中间件读取它们以进行身份验证?我想我已经把所有的管道都准备好了,但不确定如何把它们连接起来。
1条答案
按热度按时间xe55xuns1#
Cookie在客户端和服务器之间共享,因此您只需在中间件功能中访问request.cookies.get('your-cookie')。
字符串