I am currently developing an angular application that utilizes jwt for authenticating database calls. However, I encountered a problem where, when the token expires on the server, the app starts displaying blank pages instead of the expected data. This happens because the expired token is still stored in the local storage. After some investigation, I came across the jwt2 library which can be used to track token expiry. Even after implementing this solution, I still have to manually refresh the page to redirect to the login page. While I am able to navigate between components, I would like the login page to automatically appear or the token to be refreshed as soon as it expires. If the user attempts to move between components with an expired token, they should be redirected to the login page or have the token refreshed. I'm unsure of what else needs to be done in this situation. Any assistance would be greatly appreciated. Thank you in advance.
Below is the code snippet for my authentication guard:
Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router,private authService:AuthService ){ }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (!(this.authService.isTokenExpired()) ){
// logged in so return true
console.log("Logged IN");
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return true;
}
}
Here is the auth service implementation:
const helper = new JwtHelperService();
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) { }
public login<T>(username: string, password: string): Observable<HttpResponse<T>> {
let headers = new HttpHeaders();
const clientId = 'clientid';
const secret = 'secret';
headers = headers.append('Authorization', 'Basic ' + btoa(`${clientId}:${secret}`));
headers = headers.append('Content-Type', 'application/x-www-form-urlencoded');
const params = new HttpParams().set('username', username).set('password', password).set('grant_type', 'password').set('scope', 'read');
return this.http.post<T>('/oauth/token', params.toString(), {
headers,
observe: 'response'
});
}
public logout<T>() {
this.http.post('/oauth/revoke_token', '', {}).subscribe();
}
getToken(): string {
return localStorage.getItem(TOKEN_NAME);
}
isTokenExpired(token?: string): boolean {
if(!token) token = this.getToken();
if(!token) return true;
const date = helper.getTokenExpirationDate(token);
console.log(date);
if(date === undefined) return false;
return !(date.valueOf() > new Date().valueOf());
}
}
Error interceptor implementation:
@Injectable()
export class H401Interceptor implements HttpInterceptor {
constructor(private authService: AuthService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(request).pipe(catchError(err => {
if (err.status === 401) {
// auto logout if 401 response returned from api
// this.authService.logout();
// location.reload(true);
localStorage.removeItem('currentUser');
}
const error = err.error.message || err.statusText;
return throwError(error);
}));
}
}