- 确保在路由上设置了正确的AuthGuard:
const routes: Routes = [
...
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }
...
];
- 在AuthGuard中的canActivate方法中添加逻辑判断以确保用户已经登录:
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (localStorage.getItem('currentUser')) {
// 用户已登录
return true;
}
// 跳转到登录页面
this.router.navigate(['/login']);
return false;
}
}
- 在登录组件中,将用户信息存储在本地存储中:
login() {
...
localStorage.setItem('currentUser', JSON.stringify(user));
...
}
- 在注销组件中,将当前用户从本地存储中移除:
logout() {
...
localStorage.removeItem('currentUser');
...
}