This small Angular application demonstrates basic authorization using JWT tokens (JSON Web Token). The user enters a username and password, receives the token from the server and can access secure pages.

Technology Stack

• Angular 17;
• Angular Router (for navigation);
• Angular Forms (Reactive Forms);
• Mock API (use json-server or stub directly in the code);
• LocalStorage (for token storage).

Application Structure

• /login – Authorization page;
• /dashboard – Secure page (for authorized users only);
• AuthService – Service for login/logout and token storage;
• AuthGuard – Route Guard, to redirect unauthorized users to /login.

How works

• User opens /login.
• He enters login and password.

(Example: email = “[email protected]”, password = “123456”)

• The application sends a request to the API (in our case – stub).
• On successful authorization, the token is stored in localStorage.
• The user is redirected to /dashboard.
• AuthGuard checks if the token is available before each redirect.
• If there is no token – automatic redirect to /login.

Features

• Forms are implemented via Reactive Forms.
• HTTP request interceptor (HttpInterceptor) automatically adds token to request headers.
• The Logout button erases the token and returns the user to the login page.

How it looks like for a user

• Start page – login form.
• After a successful login – Dashboard welcome page.
• If you manually type /dashboard in the address bar without login, a redirect to /login occurs.