Si la vérification réussit, NextJS redirige de la page de connexion vers la page du tableau de bord

Question

Avec cet exemple, je peux demander à nextjs de rediriger vers une page spécifiée, telle que la page de connexion, si quelqu'un n'est pas authentifié. Cependant, comment puis-je modifier cela pour que si l'utilisateur est authentifié et que la page ressemble à une page de connexion, le rediriger vers le tableau de bord ou une autre page ? Existe-t-il une configuration permettant d'y parvenir ? Quelque chose comme matcher conservera correctement les URL privées. Mais comment puis-je résoudre ce problème pour une URL publique spécifique à laquelle je ne souhaite pas que les utilisateurs accèdent lorsqu'ils sont connectés ? Ce scénario est-il possible ?

importer { NextRequest, NextResponse } depuis 'next/server'

exporter le middleware de fonction asynchrone (req : NextRequest, res : NextResponse) {
  const token = req.headers.get('token') // TODO : Récupérer le jeton de l'en-tête de la requête
  const userIsAuthenticated = false // TODO : Vérifier si l'utilisateur est authentifié
  console.log('middleware.ts', 'jeton', jeton);
  si (!userIsAuthenticated) {
    const signinUrl = nouvelle URL ('/login', req.url)
    retourner NextResponse.redirect (signinUrl)
  }

  

  retourner NextResponse.next()
}

// Ici, vous pouvez spécifier tous les chemins où cette fonction middleware doit s'exécuter
// Prend en charge une valeur de chaîne unique ou un tableau de correspondants
exporter la configuration const = {
  matcher : ['/api/auth/:path*', '/'],
}            

Answer 1

En supposant que vous utilisez Next-Auth pour vous authentifier :

Utilisez withAuth包装中间件，并使用Next-Auth提供的token变量验证会话，然后根据会话的有效性重定向到您希望的route.

Voici un code TS qui peut vous aider :

import { NextResponse } from 'next/server';
import { withAuth, NextRequestWithAuth } from 'next-auth/middleware';

export default withAuth(function middleware (request: NextRequestWithAuth) {
    const session = request?.nextauth?.token;

    if (request.nextUrl.pathname === '/') return NextResponse.next();
    if (!session && request.nextUrl.pathname !== '/login') 
        return NextResponse.redirect(new URL('/login', request.url));
    if (session && request.nextUrl.pathname !== '/dashboard')
        return NextResponse.redirect(new URL('/dashboard', request.url));

    return NextResponse.next();
},
{
    callbacks: {
        authorized: () => true,
    },
});

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