Angular 16如何阻止已登录用户访问登录页面？

要实现阻止已登录用户访问登录页的需求，不需要修改原有authGuard，而是新增一个职责相反的守卫，专门处理登录页的访问控制，具体步骤如下：

1. 创建反向守卫preventLoggedInAccessGuard #

这个守卫的作用是：如果用户已登录，就重定向到个人资料页；未登录则允许访问登录页。

在guards目录下创建prevent-logged-in-access.guard.ts，代码如下：

import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../user/auth.service';
import { inject } from '@angular/core';

export const preventLoggedInAccessGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  // 判断用户是否已登录
  if (authService.isLoggedIn()) {
    // 已登录，重定向到个人资料页
    return router.createUrlTree(['/user/profile']);
  } else {
    // 未登录，允许访问登录页
    return true;
  }
};

2. 优化AuthService（可选但推荐） #

把判断用户登录状态的逻辑抽离到AuthService中，避免重复代码：

// user/auth.service.ts
import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(private jwtHelper: JwtHelperService) {}

  // 判断用户是否已登录
  isLoggedIn(): boolean {
    const token = localStorage.getItem('access_token');
    return !!token && !this.jwtHelper.isTokenExpired(token);
  }

  logout() {
    localStorage.removeItem('access_token');
    // 可添加其他注销逻辑，比如清除用户信息等
  }
}

同时更新原有authGuard，调用AuthService的方法简化逻辑：

// guards/auth.guard.ts
import { CanActivateFn, Router } from '@angular/router';
import { AuthService } from '../user/auth.service';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    authService.logout();
    // 未登录时重定向到登录页，更友好
    return router.createUrlTree(['/user/login']);
  }
};

3. 更新路由配置 #

在app-routing.module.ts中导入新守卫，并为登录路由添加canActivate配置：

import { authGuard } from './guards/auth.guard';
import { preventLoggedInAccessGuard } from './guards/prevent-logged-in-access.guard'; // 导入新守卫
import { LoginComponent } from './user/login/login.component';
import { ProfileComponent } from './user/profile/profile.component';
const routes: Routes = [
  { path: '', redirectTo: '/user/profile', pathMatch: 'full' },
  {
    path: 'user',
    children: [
      { 
        path: 'login', 
        component: LoginComponent,
        canActivate: [preventLoggedInAccessGuard] // 为登录页添加反向守卫
      },
      { path: 'profile', component: ProfileComponent, canActivate: [authGuard] },

      { path: '', redirectTo: 'profile', pathMatch: 'full' },
      { path: '**', redirectTo: 'profile', pathMatch: 'full' },
    ],
  },

  { path: '**', redirectTo: '/user/profile', pathMatch: 'full' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

为什么之前的方法会出问题？ #

• 把authGuard加在user父路由：会导致所有子路由（包括登录页）都需要登录才能访问，这与需求冲突，因为登录页是给未登录用户访问的。
• 在authGuard中判断URL跳转：会引发循环重定向，因为当用户已登录访问登录页时，authGuard返回false，路由会尝试重定向，但如果默认路由指向需要authGuard的页面，而用户已登录又会被允许访问，这种逻辑混乱会导致循环。

通过拆分两个守卫，各自职责单一：authGuard保护需要登录的页面，preventLoggedInAccessGuard阻止已登录用户访问登录页，就能完美解决问题。

内容的提问来源于stack exchange，提问作者jens5267