Angular中已登录用户访问登录路由时如何限制并保留当前路由

AI 小北

2026-7-15

实现已登录用户访问登录路由时保留当前页面的逻辑

核心思路

给登录路由单独添加一个守卫，判断用户是否已登录：若已登录，则导航回当前所在的路由（或默认首页），阻止访问登录页；未登录则允许进入登录页。

步骤1：创建LoginGuard守卫

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service'; // 替换为你的认证服务实际路径

@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 检查用户登录状态
    if (this.authService.isLoggedIn()) {
      const currentUrl = this.router.url;
      
      // 如果当前不在登录页，导航回当前页面
      if (currentUrl !== '/login') {
        this.router.navigateByUrl(currentUrl);
      } else {
        // 若直接在地址栏输入/login且已登录，跳转到默认首页（可按需修改）
        this.router.navigate(['/dashboard']);
      }
      return false; // 拦截登录路由访问
    }
    // 未登录用户允许进入登录页
    return true;
  }
}

步骤2：配置路由

在路由数组中，给登录路由绑定LoginGuard：

const routes: Routes = [
  { 
    path: 'login', 
    component: LoginComponent, 
    canActivate: [LoginGuard] // 挂载登录守卫
  },
  { 
    path: 'dashboard', 
    component: DashboardComponent, 
    canActivate: [AuthGuard] // 原有的认证守卫
  },
  { 
    path: 'training', 
    component: TrainingComponent, 
    canActivate: [AuthGuard] // 原有的认证守卫
  },
  // 其他路由配置...
];