next.js 如何使用带有上下文和中间件的Cookie?

vsdwdz23  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(99)

流程如下:
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,然后使用中间件读取它们以进行身份验证?我想我已经把所有的管道都准备好了,但不确定如何把它们连接起来。

xe55xuns

xe55xuns1#

Cookie在客户端和服务器之间共享,因此您只需在中间件功能中访问request.cookies.get('your-cookie')。

export async function middleware(request: NextRequest) {
    const access_token = request.cookies.get('your-cookie')
    if (!!access_token) {
        return NextResponse.next()
    }
    return NextResponse.rewrite(new URL('/', request.url))
}

字符串

相关问题