Project: Admin Dashboard With Auth

Introduction

Build a mini admin panel: login, JWT-protected routes, sidebar layout with nested routes, and Authorization: Bearer API calls. Use mock login or FastAPI JWT.

Prerequisites

Sister project: Vue Admin Dashboard.

Auth Store

src/stores/authStore.ts:

Protected Route

Router

LoginPage

AdminLayout

authFetch

Warning

JWT in localStorage is tutorial-convenient; understand XSS trade-offs—FastAPI JWT.

Deliverables

  • Unauthenticated /dashboard → login with redirect
  • Login success → dashboard or from path
  • Sidebar layout across nested routes
  • Logout clears token
  • Protected API sends Bearer header

FAQ

Redirect loop?

Ensure /login is outside ProtectedRoute.

Zustand hydrate token?

Read localStorage in initial state—as above.

Next optional?

Multi-Step Form.