在Angular中,可以使用路由守卫来解决路由没有考虑令牌条件的问题。下面是一个使用路由守卫的示例代码:
AuthGuard
的路由守卫服务:import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
// 检查是否存在令牌逻辑,例如从本地存储中获取令牌
const token = localStorage.getItem('token');
if (token) {
// 有令牌,允许访问路由
return true;
} else {
// 没有令牌,重定向到登录页面
this.router.navigate(['/login']);
return false;
}
}
}
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 { }
在上面的例子中,canActivate
方法会检查是否存在令牌。如果存在令牌,则允许访问路由,否则会重定向到登录页面。你可以根据自己的需求进行修改和调整。