要解决“Angular 7的路由保护不起作用”的问题,你可以按照以下步骤进行操作:
CanActivate
守卫来实现路由保护。例如,你可以创建一个名为AuthGuard
的守卫类,并在路由中指定该守卫类来保护特定的路由。import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
AuthGuard
守卫添加到需要保护的路由中。在你的路由配置文件(通常是app-routing.module.ts
)中,将AuthGuard
守卫添加到需要保护的路由中的canActivate
属性中。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
// 其他路由...
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
AuthService
中的isLoggedIn()
方法能够正确判断用户是否已登录。该方法应该返回一个布尔值来表示用户的登录状态。import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AuthService {
// 模拟用户登录状态,你可以根据实际情况进行修改
private loggedIn = false;
constructor() { }
isLoggedIn(): boolean {
return this.loggedIn;
}
login() {
this.loggedIn = true;
}
logout() {
this.loggedIn = false;
}
}
AuthService
中的login()
方法,并在注销时调用了logout()
方法。通过以上步骤,你应该能够实现Angular 7中的路由保护。当用户未登录时,访问受保护的路由时会被重定向到登录页面。而当用户已登录时,才能成功访问受保护的路由。