要在Angular 5中使用守卫进行无组件路由失败重定向,您可以按照以下步骤进行操作:
AuthGuard
的守卫类,并实现CanActivate
接口。在守卫类中,您需要注入Router
和AuthService
服务。import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authService: AuthService) {}
canActivate(): boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']); // 重定向到登录页
return false;
}
}
}
AuthService
的服务类,用于管理用户认证状态。在该服务类中,您可以添加一个isLoggedIn()
方法来检查用户是否已登录。import { Injectable } from '@angular/core';
@Injectable()
export class AuthService {
isLoggedIn(): boolean {
// 检查用户是否已登录
// 返回true或false
}
}
canActivate
属性将AuthGuard
守卫应用于需要进行认证的路由。import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './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 {}
AuthGuard
和AuthService
添加到providers
数组中。import { NgModule } from '@angular/core';
import { AuthGuard } from './auth.guard';
import { AuthService } from './auth.service';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
imports: [AppRoutingModule],
providers: [AuthGuard, AuthService]
})
export class AppModule {}
通过以上步骤,当用户访问需要认证的路由时,如果用户未登录,将会重定向到登录页。