Angular16的路由守卫基础使用

Angular16的路由守卫基础使用

1. 使用ng generate guard /guard/login命令生成guard文件
2. 因新版Angular取消了CanActivate的使用，改用CanActivateFn，因此使用router跳转需要通过inject的方式导入。

import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { Router } from '@angular/router';export const loginGuard: CanActivateFn = (route, state) => {const router = inject(Router);const token = localStorage.getItem('token');// 如果token有值，表示登录成功，继续跳转，否则跳转到首页if (token) {console.log("登陆成功");return true;}console.log("登陆失败");router.navigate(['/login']);return false;
};

3. 在路由文件中，对需要守卫的路由地址配置guard

const routes: Routes = [{path: 'demo',component: demoComponent,children: [{path: 'login',component: HeroesLoginComponent},{path: 'home',component: HomeComponent,canActivate: [loginGuard]}{ path: '', redirectTo: 'home', pathMatch: 'full' }]},
];