I built a 60+ tool Security & OSINT dashboard in Vue 3 — here's how the router handles it

Hey dev.to 👋 — I'm dixitcoder, and I just shipped DixitCoder, a full security & OSINT dashboard built entirely in Vue 3 + TypeScript + Vite.

60+ tools in one workspace: IP intel, port scanner, ping sweep, service detector, WHOIS, DNS records, SSL/TLS checker, HTTP security headers, firewall tester, DNS leak test, traceroute, GeoIP, packet sniffer, network mapper, vuln scanner, image OSINT analyzer, Base64/hash/JSON/regex utilities, system monitors, and more.

But the part I actually want feedback on is the router architecture:

🔐 Session-aware guards — every protected route hits /api/auth/me with credentials: 'same-origin' before navigation
👑 Role-based access — a meta.admin flag locks user management to admins only
🌐 Public routes — sign-in, sign-up and 404 skip the auth check cleanly
📊 Recent route tracking — router.afterEach records the last 5 visits into a reactive ref for a "recently launched" widget
🎯 Dynamic titles — document.title updates per route via meta.title
♻️ Scroll restoration — savedPosition fallback to top

⚠️ Ethics note: every offensive-adjacent tool (payload generator, packet sniffer, deauth-adjacent stuff) is gated behind auth and strictly for your own network / authorized audits only. Please don't be that person.

Stack: Vue 3 · Vue Router 4 · TypeScript · Vite · Tailwind

💬 Question for the community: is calling /api/auth/me on every navigation the right pattern, or should I cache the session in Pinia and only revalidate on sensitive routes (meta.admin, settings)? I'm worried about the extra round-trip on slow connections.

Repo / live demo link in the comments 👇