estoy haciendo un curso de Angular y tengo un problema con CanMatch y CanActivate porque estan deprecados y ahora se reemplazan con CanMatchFn y CanActivateFn que son funciones. El problema es que no se como conectar o inyectar las dependencias que necesito.
Asi tengo uno de los guards:
import { Injectable } from '@angular/core';
import {
ActivatedRouteSnapshot,
CanActivate,
CanMatch,
Route,
Router,
RouterStateSnapshot,
UrlSegment,
UrlTree,
} from '@angular/router';
import { Observable, map, tap } from 'rxjs';
import { AuthService } from '../services/auth.service';
@Injectable({ providedIn: 'root' })
export class PublicGuard implements CanMatch, CanActivate {
constructor(private authService: AuthService, private router: Router) {}
private checkAuthStatus(): boolean | Observable<boolean> {
return this.authService.checkAuthStatus().pipe(
tap((isAuth) => {
console.log({ isAuth });
}),
tap((isAuthenticated) => {
if (isAuthenticated) {
this.router.navigate(['./']);
}
}),
map((isAuthenticated) => !isAuthenticated)
);
}
canMatch(
route: Route,
segments: UrlSegment[]
): boolean | Observable<boolean> {
console.log('canMatch');
console.log({ route, segments });
return this.checkAuthStatus();
}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): boolean | Observable<boolean> {
console.log('canActivate');
console.log({ route, state });
return this.checkAuthStatus();
}
}
Asi tengo mi AuthService:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environments } from 'src/environments/environments';
import { User } from '../interfaces/user.interface';
import { Observable, catchError, map, of, tap } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class AuthService {
private baseUrl = environments.baseUrl;
private user?: User;
constructor(private httpClient: HttpClient) {}
get currentUser(): User | undefined {
if (!this.user) return undefined;
return structuredClone(this.user);
}
public login(email: string, password: string): Observable<User> {
return this.httpClient.get<User>(`${this.baseUrl}/users/1`).pipe(
tap((user) => (this.user = user)),
tap((user) => localStorage.setItem('token', 'fdsfsdfsd.fsdfsd.fsdfds'))
);
}
public checkAuthStatus(): Observable<boolean> {
if (!localStorage.getItem('token')) return of(false);
const token = localStorage.getItem('token');
return this.httpClient.get<User>(`${this.baseUrl}/users/1`).pipe(
tap((user) => (this.user = user)),
map((user) => !!user),
catchError((error) => of(false))
);
}
public logout() {
this.user = undefined;
localStorage.clear();
}
}
Y asi mi AppRouting:
import { NgModule, inject } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Error404PageComponent } from './shared/pages/error404-page/error404-page.component';
import { AuthGuard } from './auth/guards/auth.guard';
import { PublicGuard } from './auth/guards/public.guard';
const routes: Routes = [
{
path: 'auth',
loadChildren: () =>
import('./auth/auth.module').then((module) => module.AuthModule),
canActivate: [PublicGuard],
canMatch: [PublicGuard],
},
{
path: 'heros',
loadChildren: () =>
import('./heros/heros.module').then((module) => module.HerosModule),
canActivate: [AuthGuard],
canMatch: [AuthGuard],
},
{
path: '404',
component: Error404PageComponent,
},
{
path: '',
redirectTo: 'heros',
pathMatch: 'full',
},
{
path: '**',
redirectTo: '404',
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
Esta es la implementación que me sugieren los snippets:
import { inject } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivateFn, CanMatchFn, Route, RouterStateSnapshot, UrlSegment } from '@angular/router';
export const PublicCanActivateGuard: CanActivateFn = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => {
return true;
};
export const PublicCanMatchGuard: CanMatchFn = (
route: Route,
segments: UrlSegment[]
) => {
return true;
};
Según la documentación hay que hacer esto:
const canMatchTeam: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
return inject(PermissionsService).canMatch(inject(UserToken));
};
Si yo quisiera inyectar mi AuthService en estos guards como debería hacerlo, osea si quiero inyectar esa dependencia para usar uno de sus métodos?