Angular auth bug guard and interceptor

I want to do token-based authorization with angular, but I have a bug like this I can protect pages with auth guard if the token has not exploded, but I cannot use the interceptor because auth guard protects pages on a per page basis while the interceptor protects http requests so I can't create a new token with refresh token and it logins when the acces token explodes how can I solve this bug

Auth.guard.js

export const AuthGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
if (!authService.isAuthenticated()) {
console.log("User not authenticated, redirecting to login");
router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
return true;
};


Auth.interceptor.js

import { HttpInterceptorFn, HttpRequest, HttpErrorResponse, HttpContextToken } from '@angular/common/http';
import { inject } from "@angular/core";
import { AuthService } from "./auth.service";
import { catchError, of, switchMap } from "rxjs";


export const AuthInterceptor: HttpInterceptorFn = (req, next) => {
const authSvc = inject(AuthService);



if (req.context.get(IS_PUBLIC)) {
return next(req);
}

const accessToken = localStorage.getItem('accessToken');
if (accessToken) {
const authRequest = addAuthorizationHeader(req, accessToken);
return next(authRequest).pipe(
catchError((error) => {
if (error instanceof HttpErrorResponse && error.status === 401) {
return authSvc.refreshToken().pipe(
switchMap((newAccessToken) => {
if (newAccessToken) {
const authRequestWithNewToken = addAuthorizationHeader(req, newAccessToken.data.accessToken);
return next(authRequestWithNewToken);
} else {
authSvc.logout();
return of();
}
})
);
}
authSvc.logout();
return of();
})
);
} else {
authSvc.logout();
return of();
}
};

const addAuthorizationHeader = (req: HttpRequest<any>, token: string) => {
return req.clone({
headers: req.headers.set('Authorization', `Bearer ${token}`)
});
};


export const IS_PUBLIC = new HttpContextToken(() => false);`

Continue reading...