Authentifizierte Routen

Authentifizierung ist eine äußerst häufige Anforderung für Webanwendungen. In dieser Anleitung erfahren Sie, wie Sie TanStack Router verwenden, um geschützte Routen zu erstellen und Benutzer zur Anmeldung umzuleiten, wenn sie versuchen, darauf zuzugreifen.

Die Option route.beforeLoad

Die Option route.beforeLoad ermöglicht es Ihnen, eine Funktion anzugeben, die aufgerufen wird, bevor eine Route geladen wird. Sie erhält dieselben Argumente wie die Funktion route.loader. Dies ist ein großartiger Ort, um zu überprüfen, ob ein Benutzer authentifiziert ist, und ihn zur Anmeldeseite umzuleiten, wenn dies nicht der Fall ist.

Die Funktion beforeLoad wird relativ zu diesen anderen Routenladungsfunktionen in der folgenden Reihenfolge ausgeführt:

Routenabgleich (von oben nach unten)
- route.params.parse
- route.validateSearch
Routenladung (einschließlich Vorabladung)
- route.beforeLoad
- route.onError
Routenladung (parallel)
- route.component.preload?
- route.load

Es ist wichtig zu wissen, dass die Funktion beforeLoad für eine Route aufgerufen wird, bevor die Funktion beforeLoad einer ihrer untergeordneten Routen aufgerufen wird. Sie ist im Wesentlichen eine Middleware-Funktion für die Route und alle ihre Kinder.

Wenn Sie in beforeLoad einen Fehler auslösen, wird keine ihrer untergeordneten Routen versucht zu laden..

Umleitung

Obwohl nicht zwingend erforderlich, erfordern einige Authentifizierungsabläufe die Umleitung zu einer Anmeldeseite. Um dies zu tun, können Sie einen redirect() werfen aus beforeLoad.

tsx

// src/routes/_authenticated.tsx
export const Route = createFileRoute('/_authenticated')({
  beforeLoad: async ({ location }) => {
    if (!isAuthenticated()) {
      throw redirect({
        to: '/login',
        search: {
          // Use the current location to power a redirect after login
          // (Do not use `router.state.resolvedLocation` as it can
          // potentially lag behind the actual current location)
          redirect: location.href,
        },
      })
    }
  },
})

// src/routes/_authenticated.tsx
export const Route = createFileRoute('/_authenticated')({
  beforeLoad: async ({ location }) => {
    if (!isAuthenticated()) {
      throw redirect({
        to: '/login',
        search: {
          // Use the current location to power a redirect after login
          // (Do not use `router.state.resolvedLocation` as it can
          // potentially lag behind the actual current location)
          redirect: location.href,
        },
      })
    }
  },
})

Tipp

Die Funktion redirect() nimmt dieselben Optionen wie die Funktion navigate entgegen. Sie können also Optionen wie replace: true übergeben, wenn Sie den aktuellen Verlaufseintrag ersetzen möchten, anstatt einen neuen hinzuzufügen.

Sobald Sie einen Benutzer authentifiziert haben, ist es auch üblich, ihn zu der Seite zurückzuleiten, die er aufrufen wollte. Um dies zu tun, können Sie den Suchparameter redirect nutzen, den wir in unserer ursprünglichen Umleitung hinzugefügt haben. Da wir die gesamte URL durch die ursprüngliche ersetzen werden, ist router.history.push dafür besser geeignet als router.navigate.

tsx

router.history.push(search.redirect)

router.history.push(search.redirect)

Nicht umgeleitete Authentifizierung

Einige Anwendungen entscheiden sich dafür, Benutzer nicht zu einer Anmeldeseite umzuleiten, sondern den Benutzer auf derselben Seite zu belassen und ein Anmeldeformular anzuzeigen, das entweder den Hauptinhalt ersetzt oder es über ein Modal ausblendet. Dies ist auch mit TanStack Router möglich, indem einfach das Rendern des <Outlet /> unterbrochen wird, das normalerweise die untergeordneten Routen rendern würde.

tsx

// src/routes/_authenticated.tsx
export const Route = createFileRoute('/_authenticated')({
  component: () => {
    if (!isAuthenticated()) {
      return <Login />
    }

    return <Outlet />
  },
})

// src/routes/_authenticated.tsx
export const Route = createFileRoute('/_authenticated')({
  component: () => {
    if (!isAuthenticated()) {
      return <Login />
    }

    return <Outlet />
  },
})

Dies behält den Benutzer auf derselben Seite, ermöglicht es Ihnen aber dennoch, ein Anmeldeformular zu rendern. Sobald der Benutzer authentifiziert ist, können Sie einfach das <Outlet /> rendern und die untergeordneten Routen werden gerendert.

Authentifizierung mit React Context/Hooks

Wenn Ihr Authentifizierungsablauf auf Interaktionen mit React Context und/oder Hooks angewiesen ist, müssen Sie Ihren Authentifizierungsstatus mithilfe der Option router.context an TanStack Router übergeben.

Wichtig

React-Hooks sind nicht dafür gedacht, außerhalb von React-Komponenten verwendet zu werden. Wenn Sie einen Hook außerhalb einer React-Komponente verwenden müssen, müssen Sie den von dem Hook zurückgegebenen Zustand in einer Komponente extrahieren, die Ihr <RouterProvider /> umschließt, und dann den zurückgegebenen Wert an TanStack Router weitergeben.

Wir werden die Optionen für router.context im Abschnitt Router Context ausführlich behandeln.

Hier ist ein Beispiel, das React Context und Hooks zur Absicherung authentifizierter Routen in TanStack Router verwendet. Sehen Sie sich die vollständige funktionierende Einrichtung im Beispiel für authentifizierte Routen an.

src/routes/__root.tsx

tsx

import { createRootRouteWithContext } from '@tanstack/react-router'

interface MyRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: AuthState
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: () => <Outlet />,
})

import { createRootRouteWithContext } from '@tanstack/react-router'

interface MyRouterContext {
  // The ReturnType of your useAuth hook or the value of your AuthContext
  auth: AuthState
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: () => <Outlet />,
})

src/router.tsx

tsx

import { createRouter } from '@tanstack/react-router'

import { routeTree } from './routeTree.gen'

export const router = createRouter({
  routeTree,
  context: {
    // auth will initially be undefined
    // We'll be passing down the auth state from within a React component
    auth: undefined!,
  },
})

import { createRouter } from '@tanstack/react-router'

import { routeTree } from './routeTree.gen'

export const router = createRouter({
  routeTree,
  context: {
    // auth will initially be undefined
    // We'll be passing down the auth state from within a React component
    auth: undefined!,
  },
})

src/App.tsx

tsx

import { RouterProvider } from '@tanstack/react-router'

import { AuthProvider, useAuth } from './auth'

import { router } from './router'

function InnerApp() {
  const auth = useAuth()
  return <RouterProvider router={router} context={{ auth }} />
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

import { RouterProvider } from '@tanstack/react-router'

import { AuthProvider, useAuth } from './auth'

import { router } from './router'

function InnerApp() {
  const auth = useAuth()
  return <RouterProvider router={router} context={{ auth }} />
}

function App() {
  return (
    <AuthProvider>
      <InnerApp />
    </AuthProvider>
  )
}

Dann können Sie in der authentifizierten Route den Authentifizierungsstatus mithilfe der Funktion beforeLoad überprüfen und einen redirect() werfen zu Ihrer Login-Route, wenn der Benutzer nicht angemeldet ist.

src/routes/dashboard.route.tsx

tsx

import { createFileRoute, redirect } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
})

import { createFileRoute, redirect } from '@tanstack/react-router'

export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: '/login',
        search: {
          redirect: location.href,
        },
      })
    }
  },
})

Sie können optional auch den Ansatz der Nicht umgeleiteten Authentifizierung verwenden, um ein Anmeldeformular anzuzeigen, anstatt einen redirect aufzurufen.

Dieser Ansatz kann auch in Verbindung mit Pathless- oder Layout-Routen verwendet werden, um alle Routen unter ihrer übergeordneten Route zu schützen.

Detaillierte Schritt-für-Schritt-Anleitungen finden Sie unter

Wie man grundlegende Authentifizierung einrichtet - Vollständige Einrichtung mit React Context und geschützten Routen
Wie man Authentifizierungsanbieter integriert - Verwenden von Auth0, Clerk oder Supabase
Wie man rollenbasierte Zugriffskontrolle einrichtet - Berechtigungen und rollenbasierte Routen implementieren

Beispiele

Funktionierende Authentifizierungsbeispiele sind im Repository verfügbar

Beispiel für grundlegende Authentifizierung - Einfache Authentifizierung mit Kontext
Firebase-Authentifizierung - Firebase Auth-Integration
TanStack Start Auth Beispiele - Verschiedene Auth-Implementierungen mit TanStack Start

Die Option route.beforeLoad

Umleitung

Nicht umgeleitete Authentifizierung

Authentifizierung mit React Context/Hooks

Beispiele

Bytes abonnieren

Bytes abonnieren

Authentifizierte Routen

Die Option route.beforeLoad

Umleitung

Nicht umgeleitete Authentifizierung

Authentifizierung mit React Context/Hooks

Verwandte Anleitungen

Beispiele

Bytes abonnieren

Bytes abonnieren