Angular16的路由守卫基础使用

Angular16的路由守卫基础使用

  1. 使用ng generate guard /guard/login命令生成guard文件
  2. 因新版Angular取消了CanActivate的使用,改用CanActivateFn,因此使用router跳转需要通过inject的方式导入。
typescript 复制代码
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;
};
  1. 在路由文件中,对需要守卫的路由地址配置guard
typescript 复制代码
const routes: Routes = [
  {
    path: 'demo',
    component: demoComponent,
    children: [
      {
        path: 'login',
        component: HeroesLoginComponent
      },
      {
        path: 'home',
        component: HomeComponent,
        canActivate: [loginGuard]
      }
      { path: '', redirectTo: 'home', pathMatch: 'full' }
    ]
  },
];
相关推荐
谦哥11 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
心在飞扬25 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C28 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
张志鹏PHP全栈1 小时前
TypeScript 第二天,TypeScript中的类型(一)
typescript
10年前端老司机2 小时前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 小时前
vue实现微信聊天emoji表情
前端·javascript
極光未晚2 小时前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive2 小时前
原型与原型链到底是什么?
javascript
安替-AnTi2 小时前
基于 React 和 TypeScript 搭建的机器学米其林餐厅数据分析项目
react.js·typescript·数据分析·毕设·米其林