NextJS 删除 cookie 并从中间件重定向

VGa*_*l45 5 authentication cookies middleware next.js next.js13

我想要实现的是,如果accessToken和refreshToken都过期,则删除“accessToken”和“refreshToken”cookie,然后重定向到“/login”路由。

这是我现在的代码

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { verifyAccessToken, verifyRefreshToken } from './utils/checkAuth';
import jwt_decode from "jwt-decode";
import { refreshAccessToken } from './utils/refreshToken';

interface JwtPayload {
  email: string
  sub: number
  iat: number
  exp: number
}


export async function middleware(req: NextRequest) {
    const accessToken = req.cookies.get('accessToken')?.value;
    const refreshToken = req.cookies.get('refreshToken')?.value;
    
    if(accessToken && refreshToken){
      const jwtPayload: JwtPayload = jwt_decode(accessToken);

      const validToken = 
        accessToken && 
        (await verifyAccessToken(accessToken).catch((err) => {
          console.log(err); 
        }));
  
      if(req.nextUrl.pathname.startsWith('/login') && !validToken){
        return 
      }
  
      if((req.url.includes('/login') || req.url.includes('/register')) && validToken){
        return NextResponse.redirect(new URL('/login', req.url));
      }
  
      if(!validToken){
        try {
          const validRefreshToken = 
            refreshToken && 
            (await verifyRefreshToken(refreshToken).catch((err) => {
              console.log(err); 
            }));
          if(validRefreshToken){
            const newAccessToken = await refreshAccessToken(refreshToken, jwtPayload?.sub);
            console.log('GENERATED NEW ACCESS TOKEN', newAccessToken);
            // here I want to set accesToken cookie to newAccessToken
          } else {
            console.log('Refresh token expired');
            throw new Error('Refresh token expired')
          }
        } catch (error) {
          console.log('cookies should be deleted');
          return NextResponse.redirect(new URL('/login', req.url));
        }
      }
      console.log('TOKEN VALID', accessToken);
    } else {
      if(req.nextUrl.pathname.startsWith('/login')){
        return 
      } else {
        return NextResponse.redirect(new URL('/login', req.url));
      }      
    }
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: ['/', '/login', '/register', '/jobs/:path*', '/profile'],
}
Run Code Online (Sandbox Code Playgroud)

我发现通过这样做

const response = NextResponse.next()
response.cookies.delete('accessToken')
response.cookies.delete('refreshToken')
Run Code Online (Sandbox Code Playgroud)

这会起作用,但要真正删除cookie,我需要从中间件返回“响应”,但我也想将用户重定向到“/登录”,如果我返回“响应”而不是返回“NextResponse.redirect(新URL('/登录',req.url))”

如何删除 cookie 或设置 cookie 然后重定向?

小智 7

const response = NextResponse.redirect(new URL('/login', req.url))
response.cookies.delete('accessToken')
response.cookies.delete('refreshToken')
return response
Run Code Online (Sandbox Code Playgroud)