这种情况通常是因为没有对canActivate方法进行正确的实现所导致的。以下是一些可能的
在app.module.ts中,确保已经用forRoot方法注册了路由。例如:
import { RouterModule, Routes } from '@angular/router';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent }
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
AuthGuard必须实现CanActivate接口,并实现canActivate方法。例如:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate() {
if (localStorage.getItem('currentUser')) {
// 已登录,允许访问
return true;
}
// 未登录,返回false并导航到登录页
this.router.navigate(['/login']);
return false;
}
}
在路由定义中使用AuthGuard。例如:
import { AuthGuard } from './auth.guard';
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
];
如果这些步骤都正确实施,您的canActivate方法应该能够返回true并启用路由保护。
上一篇:Angular关注选择元素