SaiBalaji IT Tech Solutions

RBAC + Refresh Token + Permission Authorization (ULTIMATE) You will get: ✅ JWT Access Token ✅ Refresh Token stored in DB ✅ Refresh Token Rotation (VERY important) ✅ Revoke tokens on logout ✅ Roles + Permissions in DB ✅ [Authorize(Policy="PERMISSION")] ✅ Custom AuthorizationHandler ✅ Clean architecture style (simple but enterprise) 🏗️ 1) Database Tables (Enterprise) Tables you must have: Users Roles Permissions UserRoles RolePermissions RefreshTokens ✅ 2) Entities (EF Core) 📌 User.cs public class User { public int Id { get; set; } public string FullName { get; set; } = ""; public string Email { get; set; } = ""; public string PasswordHash { get; set; } = ""; public ICollection<UserRole> UserRoles { get; set; } = new List<UserRole>(); public ICollection<RefreshToken> RefreshTokens { get; set; } = new List<RefreshToken>(); } 📌 Role.cs pub...

Full Angular RBAC + Permission System (ULTIMATE) You will get: ✅ Backend-driven Roles + Permissions ✅ Angular stores user access ✅ Dynamic menus (Task C) ✅ Route guard (Task D) ✅ API protection (Task E) ✅ Admin can assign permissions (concept) ✅ Supports Permission Groups, Feature Flags, Multi-role users ✅ Clean enterprise architecture 🧠 Enterprise Concept (Real World) After login, backend returns: { "userId": 101, "name": "Sai", "roles": ["Admin"], "permissions": [ "DASHBOARD_VIEW", "USERS_VIEW", "USERS_CREATE", "REPORTS_VIEW", "SETTINGS_VIEW" ] } Angular uses this for: Menu show/hide Route guard API guard UI button enable/disable 1️⃣ Auth State Model (Enterprise) // auth-state.model.ts import { Permission, Role } from './permission.model'; export interface AuthUser { userId: number; ...

API Protection + Permission Headers + Global Error Handling + Auto Logout in Angular You will get: ✅ Attach Access Token automatically ✅ Add optional Permission header (enterprise style) ✅ Global API error handling ✅ Auto logout when refresh fails ✅ Centralized ApiService pattern ✅ Works perfectly with Task B Refresh Token system 1️⃣ Add Permission Metadata to API Calls (Enterprise Pattern) // api-permissions.ts export const ApiPermissions = { UsersGetAll: 'USERS_VIEW', UsersCreate: 'USERS_CREATE', ReportsView: 'REPORTS_VIEW' } as const; export type ApiPermissionValue = typeof ApiPermissions[keyof typeof ApiPermissions]; 2️⃣ Create Enterprise ApiService (Centralized) Instead of calling HttpClient everywhere. // api.service.ts import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { ApiPermissionValue } from ...

Route Guards Based on Permission in Angular (Enterprise) This setup includes: ✔ Prevent user from opening URL directly ✔ Redirect to 403 Forbidden page ✔ Supports roles + permissions ✔ Works with lazy loaded modules 1️⃣ Create Forbidden Component (403 Page) // forbidden.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-forbidden', template: ` 403 - Forbidden You don’t have permission to access this page. ` }) export class ForbiddenComponent {} 2️⃣ Add Route Data (Permission Required) // app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { ForbiddenComponent } from './forbidden.component'; import { PermissionGuard } from './core/auth/permission.guard'; const routes: Routes = [ { path: 'dashboard', canActivate: [PermissionGuard], data: { permissions: [...

Role-based Dynamic Menus in Angular (Enterprise) This Angular setup includes: ✅ Roles + Permissions ✅ Show/Hide menu items dynamically ✅ Works with Angular Material Sidenav ✅ Supports nested menus ✅ Supports multiple roles ✅ Enterprise clean structure Goal If user has: Admin → show everything Manager → show dashboard + reports User → show only basic pages 1️⃣ Permission Model (Enterprise) // permission.model.ts export type Role = 'Admin' | 'Manager' | 'User'; export type Permission = | 'DASHBOARD_VIEW' | 'USERS_VIEW' | 'USERS_CREATE' | 'REPORTS_VIEW' | 'SETTINGS_VIEW'; 2️⃣ Menu Model // menu-item.model.ts import { Permission } from './permission.model'; export interface MenuItem { label: string; icon?: string; route?: string; permissions?: Permission[]; // permissions required children?: MenuItem[]; // nested menus } 3️⃣ Define Enterprise Menu Conf...

Role-based Dynamic Menus in Angular (Enterprise) This Angular setup includes: ✅ Roles + Permissions ✅ Show/Hide menu items dynamically ✅ Works with Angular Material Sidenav ✅ Supports nested menus ✅ Supports multiple roles ✅ Enterprise clean structure Goal If user has: Admin → show everything Manager → show dashboard + reports User → show only basic pages 1️⃣ Permission Model (Enterprise) // permission.model.ts export type Role = 'Admin' | 'Manager' | 'User'; export type Permission = | 'DASHBOARD_VIEW' | 'USERS_VIEW' | 'USERS_CREATE' | 'REPORTS_VIEW' | 'SETTINGS_VIEW'; 2️⃣ Menu Model // menu-item.model.ts import { Permission } from './permission.model'; export interface MenuItem { label: string; icon?: string; route?: string; permissions?: Permission[]; // permissions required children?: MenuItem[]; // nested menus } 3️⃣ Define Enterprise Menu Conf...

Full Refresh Token System in Angular (Enterprise) This Angular setup includes: ✅ Access Token + Refresh Token ✅ HttpInterceptor ✅ Auto refresh when 401 happens ✅ Retry the original failed request ✅ Prevent multiple refresh calls (queue system) ✅ Works for multiple parallel API calls ✅ Enterprise clean structure Folder Structure src/app/core/auth/ auth.service.ts token.service.ts auth.interceptor.ts auth.guard.ts (optional) 1️⃣ TokenService (Enterprise) Handles storing and retrieving tokens from localStorage. import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class TokenService { private accessKey = 'access_token'; private refreshKey = 'refresh_token'; getAccessToken(): string | null { return localStorage.getItem(this.accessKey); } getRefreshToken(): string | null { return localStorage.getItem(this.refreshKey); } setTokens(accessToken: string, refreshTo...