I have built a frontend using Angular 6 and I am trying to implement role-based authorization using JWT helper-service. However, I am facing an issue where I am unable to access the admin component even though I have the necessary authorization.
Below is my LoginComponent:
import { Component, OnInit } from '@angular/core';
import { AuthService } from 'src/app/auth.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private Auth: AuthService,private router: Router) { }
ngOnInit() {
}
loginUser(event)
{
event.preventDefault()
const target = event.target
const email= target.querySelector('#email').value
const password = target.querySelector('#password').value
this.Auth.getUserDetails(email,password).subscribe(data =>{
if(this.Auth.isAuthenticated(),data.token)
{
localStorage.setItem('token',data.token);
return true;
}
else
{
window.alert("Authentication Failed");
}
});
console.log(email,password)
}
}
This is my role.guard.ts file:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import decode from 'jwt-decode';
@Injectable({
providedIn: 'root'
})
export class RoleGuard implements CanActivate {
constructor( public auth: AuthService,public router: Router) {}
// Methods for checking role-based authentication
}
Here is my auth.guard.ts implementation:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { map } from 'rxjs/operators';
import { Router } from '@angular/router'
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService,private router:Router, private user: UserService)
{
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
// Check for user authentication before allowing access
return true
}
}
My auth.service.ts code looks like this:
import { Injectable } from '@angular/core';
import{ HttpClient } from '@angular/common/http';
import { JwtHelperService } from '@auth0/angular-jwt';
@Injectable({
providedIn: 'root'
})
export class AuthService {
// Implementation of methods for handling authentication
}
Here's a snippet from my app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule, MatInputModule, MatSelectModule
} from '@angular/material'
import { RoleGuard } from './role.guard'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { AdmindashboardComponent } from './components/admindashboard/admindashboard.component';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import { ViewallstudentsComponent } from './components/viewallstudents/viewallstudents.component';
import { AdminComponent } from './components/admin/admin.component';
import { AddsectionadminsComponent } from './components/addsectionadmins/addsectionadmins.component';
import { PagenotfoundComponent } from './components/pagenotfound/pagenotfound.component';
import { from } from 'rxjs';
import { JwtHelperService, JwtModule } from '@auth0/angular-jwt';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
AdmindashboardComponent,
ViewallstudentsComponent,
AdminComponent,
AddsectionadminsComponent,
PagenotfoundComponent
],
imports: [
JwtModule,
MatSelectModule,
MatTableModule,
MatInputModule,
BrowserModule,
HttpClientModule,
AppRoutingModule,
BrowserAnimationsModule,
RouterModule.forChild([
// Route configurations
])
],
providers: [ AuthGuard, UserService,AuthService,RoleGuard,JwtHelperService],
bootstrap: [AppComponent]
})
export class AppModule { }