Able Pro
Vue
Vue
  • Documentation
  • Pre-requisites
  • Quick Start
  • Directory Structure
  • ⛱️Theme UI
    • 🎛️Icons
    • 👓Change Logo
    • 🆎Change Typography
    • 🔮Theme Colors
    • ⚙️Theme Settings
  • 👨‍💻Development
    • State Management
    • Authentication
    • Axios API Calls
    • Routing
  • How to
    • Skip Auth
  • Dependencies
  • Roadmap
  • Support
  • Changelog
  • FAQ
Powered by GitBook
On this page
  1. Development

Authentication

Manage JWT Token based Authentication.

JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object.

This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.

How does it work?

Only authenticated users can access dashboard pages. If a user is not authenticated, the user is redirected to the login page.

Main.ts

// Main.ts
import { fakeBackend } from '@/utils/helpers/fake-backend';
fakeBackend();

router.ts

// router.ts
router.beforeEach(async (to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/'];
  const auth: AuthStore = useAuthStore();

  const isPublicPage = publicPages.includes(to.path);
  const authRequired = !isPublicPage && to.matched.some((record) => record.meta.requiresAuth);

  // User not logged in and trying to access a restricted page
  if (authRequired && !auth.user) {
    auth.returnUrl = to.fullPath; // Save the intended page
    next('/login');
  } else if (auth.user && to.path === '/login') {
    // User logged in and trying to access the login page
    next({
      query: {
        ...to.query,
        redirect: auth.returnUrl !== '/' ? to.fullPath : undefined
      }
    });
  } else {
    // All other scenarios, either public page or authorized access
    next();
  }
});
PreviousState ManagementNextAxios API Calls

Last updated 4 months ago

👨‍💻