Angular 21中CanActivate与SSR场景下路由守卫异常跳转问题咨询

看了你的代码和描述，问题出在守卫的逻辑方向搞反了——你现在的代码是未登录时重定向到/home，但你实际需要的应该是未登录时跳转到/login，已登录才允许访问/home，这就导致了路由行为和预期完全相反。

问题分析 #

你的守卫代码中，当localStorage.getItem('utoken')不存在时，返回的是跳转到/home的UrlTree。结合你遇到的「访问/home自动跳/login」的现象，大概率是你把重定向目标写反了，或者路由配置中守卫的应用位置有误。核心逻辑应该是：已登录状态允许进入受保护路由，未登录状态强制跳转到登录页。

修正后的守卫代码 #

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';
import { CanActivateFn, Router } from '@angular/router';

export const authgGuard: CanActivateFn = (route, state) => {
  const id = inject(PLATFORM_ID);
  const _Router = inject(Router);
  
  if (isPlatformBrowser(id)) {
    if (localStorage.getItem('utoken') !== null) {
      // 已登录，允许访问当前路由
      return true;
    } else {
      // 未登录，重定向到登录页
      return _Router.createUrlTree(['/login']);
    }
  } else {
    // SSR环境下无localStorage，同样重定向到登录页
    return _Router.createUrlTree(['/login']);
  }
};

额外需要确认的路由配置 #

确保你的路由配置逻辑正确：这个守卫应该只绑定在需要登录才能访问的路由（比如/home）上，而/login路由不能添加该守卫，否则会出现循环重定向。示例配置如下：

const routes: Routes = [
  { path: 'login', component: LoginComponent }, // 无需守卫，允许未登录访问
  { path: 'home', component: HomeComponent, canActivate: [authgGuard] }, // 需要登录验证
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // 其他路由...
];

验证步骤 #

1. 打开浏览器控制台，执行localStorage.getItem('utoken')确认该值确实存在；
2. 替换修正后的守卫代码，重启Angular应用；
3. 访问/home，此时应该正常进入页面，不会跳转至/login；
4. 手动删除utoken（控制台执行localStorage.removeItem('utoken')），再次访问/home，应该自动跳转到/login，符合预期逻辑。

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