1. Jwt Method

Auth guard provide lifecycle event called canActivate. 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.

                      
// -----------------------------------------------------------------------------------------
// File : src/main.ts
// -----------------------------------------------------------------------------------------
import { fakeBackend } from '@/utils/helpers/fake-backend';
fakeBackend();

// -----------------------------------------------------------------------------------------
// File : src/router/index.ts
// -----------------------------------------------------------------------------------------
router.beforeEach(async (to, from, next) => {
  // redirect to login page if not logged in and trying to access a restricted page
  const publicPages = ['/auth/login1'];
  const authRequired = !publicPages.includes(to.path);
  const auth: any = useAuthStore();

  if (to.matched.some((record) => record.meta.requiresAuth)) {
      if (authRequired && !auth.user) {
          auth.returnUrl = to.fullPath;
          return next('/auth/login1');
      } else next();
  } else {
      next();
  }
});