如果用户未登录,则尝试让以下 AuthGuard 正确重定向。
export const authGuard: CanActivateFn = (route, state) => {
const authService = inject(AuthService);
const router = inject(Router);
return authService.currentUser$.pipe(map((auth: User | null) => {
console.log(auth);
if(auth !== null){
console.log(auth);
return true;
}
return router.createUrlTree(['/login']);
}));
};
在我的 AuthService 文件中我使用以下内容
private currentUserSource = new ReplaySubject<User | null>(1);
currentUser$ = this.currentUserSource.asObservable();
在我的 app.routes.ts 文件中,我的测试组件正在延迟加载。
{path: 'test', loadComponent: () => import('./test/test.component').then(mod => mod.TestComponent), canActivate: [authGuard]},
它没有将用户重定向到登录页面,而是仅显示一个空白页面。
谢谢
我用不同的方法重写了几次,但都未能重定向。
我尝试在 stackblitz 上复制您的问题,并且在使用功能防护时,我遇到了“没有 authguard 提供程序”,其中会返回黑色页面。
所以我把功能性的authguard变成了类守卫,并在
root
中提供
看这里:
https://stackblitz.com/edit/angular-standalone-route-fhto46?file=src%2Froutes%2Froutes.ts
@Injectable({ providedIn: 'root' })
class AuthGuardClass implements CanActivate {
private router = inject(Router);
canActivate() {
return of({ user: 'mock' }).pipe( // Replace mock
map((auth: { user: string } | null) => {
console.log(auth);
if (auth !== null) {
console.log(auth);
return true;
}
return this.router.createUrlTree(['/login']);
})
);
}
}
export const routes: Routes = [
{
path: '',
canActivate: [AuthGuardClass],
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'home',
},
{
path: 'home',
loadComponent: () =>
import('./home.component').then((mod) => mod.HomeComponent),
},
],
},
{
path: 'login',
loadComponent: () =>
import('./login.component').then((mod) => mod.LoginComponent),
},
];
我认为问题可能是使用
ReplaySubject
作为您的 currentUserSource
变量,我建议将其替换为 BehaviourSubject
:
private currentUserSource = new BehaviourSubject<User | null>(null);
currentUser$ = this.currentUserSource.asObservable();
至于为什么我认为这可能是问题的根源,导致空页锁定的防护通常意味着它等待
Observable
发出值,您的 ReplaySubject
不保留默认值,这将导致如果 authGuard
或 User
均未发出,则阻止您的 null
执行任何操作。
将其更改为
BehaviourSubject
将确保始终有一个值,因此守卫可能始终能够完成。