Angular 15中CanActivate接口是否废弃？路由守卫类该如何适配？

CanActivate接口的当前状态 #

• 没错，Angular 15已经把CanActivate接口标记为废弃了，但在15版本里还是能正常用这个接口写路由守卫，不会直接报错。
• 官方废弃它是因为推出了更灵活的函数式守卫，用来替代传统的类守卫模式。

适配方案：改用函数式路由守卫 #

官方最推荐的替代方式是用函数式守卫，具体操作如下：

1. 编写函数式守卫

直接定义一个符合CanActivateFn类型的函数，不用再写类了，示例代码：

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

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

  // 校验登录状态
  if (authService.isLoggedIn()) {
    return true;
  }
  // 未登录就跳转到登录页，带上返回地址
  return router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } });
};

2. 在路由配置中使用

在路由数组里直接引用这个函数就行，替换原来的类守卫：

import { Routes } from '@angular/router';
import { authGuard } from './auth.guard';
import { DashboardComponent } from './dashboard.component';
import { LoginComponent } from './login.component';

export const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [authGuard] // 直接用函数
  },
  { path: 'login', component: LoginComponent }
];

3. 临时过渡方案（可选）

如果暂时不想全改成函数式，继续用类守卫也没问题，但要注意：

• 类守卫还是要实现CanActivate接口，同时加上@Injectable({ providedIn: 'root' })装饰器
• 不过官方后续版本会彻底移除这个接口，建议尽早迁移到函数式方案

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