Categories
Development

Role based user in Angular 8 with enum

I’m following this simple tutorial on Angular 8 based on role-based authentitcation. It has this enum: export enum Role { User = ‘User’, Admin = ‘Admin’ } In the guard, there is a part of the tutorial code that I don’t understand (even though it is commented): canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { const currentUser = […]

Categories
Development

this.interceptor.intercept is not a function Angular 8

I’m trying to implement jsonwebtokens in my Angular project and for that purpose I’m using an HttpInterceptors. Unfortunately I’m facing the following error: this.interceptor.intercept is not a function I’ve already searched over other Stackoverflow threads in order to apply their solutions, but so far I was not able to make it work. Here is my […]

Categories
Development

How to solve problem redirect to homepage without login

Problem : i have problem when i open the apps it display login only for 2 seconds and it redirect to homepage without login. i need to logout first, then insert username and password to go to homepage. how can i solve that. Expected : when open the apps it shows login page without redirect […]

Categories
Development

Invalid url in Angular should check some condition before redirecting

My initial domain is localhost:4200 and which in redirects me to some page, based on my routing, but I want to input an invalid domain for example localhost:4200/Whasup or localhost:4200/Whasdown, where Whasup and whasdown page doesn’t exist. Before i get redirected to default Angular 404 page, I need to check some conditions. And if my […]

Categories
Development

Angular cli router is not changin browser url on Router.navigate

I made my angular project locally, and all works fine, if i deploy it on a shared hosting server router seems broken. I made an auth guard service as router guard, and if user is not authenticated redirect to main page, the problem is that on redirect app render the main page component, but doesn’t […]

Categories
Angular Development

How to apply canActivate guard for all routes(master route and all sub routes) in Angular

I use Angular Guard to protect my routes, i add canActivate attr in master route and it works fine, while for sub single routes(ReportsRouteModule/RequestsRouteModule…), if i want to enable guard, i alse need to set canActivate in each routes, i think it’s a bad way to use angular guard and waste a lot time. So […]

Categories
Angular Development

Angular how to get headers value in the canActive function?

I need to redirect into different user page depends on the userRole value received from the header. angular.routing.ts { path: ”, pathMatch: ‘full’, redirectTo: ‘/login’ }, { path: ‘user’, loadChildren: ‘./home/home.module#HomeModule’, canActivate: [AuthGuard], data: { roles: Role.User} }, { path: ‘admin’, loadChildren: ‘./somemodule#SomeModule’, canActivate: [AuthGuard], data: { roles: Role.Admin}}, { path: ‘login’, component: LoginComponent, canActivate: […]

Categories
Development

auth0 always shows login dialog on browser refresh

I’m using the new auth0-spa-js library with universal login. I followed the guide on https://auth0.com/docs/quickstart/spa/angular2/01-login to the letter, but still – on browser reload client.isAuthenticated() will always return false and it will redirect to the login page. This is very frustrating. EDIT: Removed links to github, and added my code directly in post as requested […]

Categories
Angular Development

Problem with routing in angular to open different menus on the same place

I’m a newbie in Angular. I have this situation: My HomeComponent has in .html page a “reference” to Appmenucomponent. So, I need to click on different menus ( each a new component) and open on the same place (div), like the HomeComponent. home.component.html <div class=”wrapper”> <app-appmenu></app-appmenu> <div class=”content-wrapper”> <section class=”content-header”> <section class=”content”> <h1>Welcome, !</h1> <router-outlet></router-outlet> […]

Categories
Angular Development

Angular Auth Login using Firestore Custom Claims

I am creating users dynamically in firestore auth and have added multiple types of claims i.e admin, instructor, assistant. So far i am able to login using the new created users and getting claims property as true i.e admin: true, instructor: true according to the login credentials i am providing. But i am unable to […]