CODEWITHSUNDEEP
keycloak
Jaz
Jaz

Reputation: 11

Angular project manage access permission using keycloak

I'm using keycloak for an angular project, I have created two realm roles(admin and member), client and two users(Irma and Sheldon).

I am a beginner,

I wanted to allow access to the client for one user(Irma) and deny for other user(Sheldon).

Upvotes: 0

Views: 1895

Answers (1)

mumblesNZ
mumblesNZ

Reputation: 616

May I suggest for the angular side, you use a library to do the authorization, something like: https://github.com/mauriciovigolo/keycloak-angular. Once you have that setup, and you have configured your authGuard, it's just a case of protecting your URL via the roles param in your router object.

For example (taken from https://angular.io/guide/router#milestone-5-route-guards, and added in keycloak roles bit): 

import { AuthGuard }                from '../auth/auth.guard';

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    data: {
       roles: ['admin'],
    },
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          { path: 'heroes', component: ManageHeroesComponent },
          { path: '', component: AdminDashboardComponent }
        ],
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(adminRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule {}

The last piece of the puzzle will be on the keycloak server side, you have to go to your user Irma, and assign her the 'admin' role. This will allow her to access what ever paths you protect with the 'admin' role via the router above.

Hope this helps.

Upvotes: 2

Related Questions