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' }
    ]
  },
];