为什么路由防护 canLoad 不触发,但 canActivate 却触发

2024-04-03

我有一个 Angular 2.0.1(最终版)应用程序,它使用哈希位置策略为路线导航策略。

我将其中一条路线定义如下:

    { 
    path: 'shiftmanage', component: ShiftManageComponent,
    canLoad: [AuthGuard],
    canActivate: [AuthGuard] 
    },

这是 AuthGuard 类:

    import { Injectable }           from '@angular/core';
    import { 
        Route, 
        Router, 
        CanLoad, 
        CanActivate,
        ActivatedRouteSnapshot, 
        RouterStateSnapshot }       from '@angular/router';

    @Injectable()
    export class AuthGuard implements CanLoad, CanActivate {
        constructor(private router: Router) {
            console.log("AuthGuard constructor")
        }

        canLoad(route: Route): boolean {
            if (route.path === "shifts") {
                return true;
            } else {
                return false;
            }        
        }

        canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
            if (route.routeConfig.path === "shiftmanage") {
                return true;
            } else {
                return false;
            }
        }
    }

我将此保护类添加到 NgModule Providers 中,如下所示:

providers: [
    AuthGuard,
    { provide: LocationStrategy, useClass: HashLocationStrategy }
    ... other providers
]

导航的工作原理和可以激活每当我尝试导航到轮班管理 path.

PROBLEM: The canLoad路线守卫永远不会被击中。

问题:

Is this canLoad由于 HashLocationStrategy ,守卫没有被击中,或者我还做错了什么?


canLoad https://angular.io/guide/router#canload-guard-guarding-unauthorized-loading-of-feature-modules用于加载延迟加载模块 https://angular.io/guide/router#milestone-6-asynchronous-routing with loadChildren

{
  path: 'child',
  canLoad: [AuthGuard],
  loadChildren: 'path/to/child.module'
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么路由防护 canLoad 不触发,但 canActivate 却触发 的相关文章

  • 来自另一个类的 Typescript 函数

    我对打字稿还很陌生 但现在我遇到了问题 我在每个类中都用 Typescript 编写了一个函数 function someFunction 现在我想从另一个 TS 文件调用该函数 我将其声明如下 declare function someF
  • 使用 facebook 共享动态更新元标签 - Angular 6

    我需要动态更新元标记 如 og title og description 和 og image 并在 facebook 上共享相同的内容 我已经尝试了所有方法 但没有任何效果 首先 我尝试使用 javascript 设置元标记 如下所示 v
  • 角度垫排序不适用于带点表示法的 matColumnDef

    我正在尝试按列对表进行排序 当我必须过滤另一个结果中的结果时 就会出现问题 我尝试通过括号表示法和点表示法访问该属性 但没有给出结果 还将最终节点放置在 matColumnDef 中 但失败 因为有 2 列同名 table table
  • 如何将类型添加到 Vite 库构建中?

    我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库 我创建了该项目vue ts预设 在我的组件中 我定义了道具及其类型 并使用了一些接口 但
  • 联合数据类型上的条件数据类型

    假设您有以下类型 type Foo prop1 foo prop2 null type Bar prop1 bar prop2 number type FooOrBar Foo Bar 是否可以使用条件类型重写上述代码 我已经尝试过以下方法
  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise
  • TypeScript 中的循环类型引用

    我是打字稿新手 正在尝试了解如何在两种类型之间设置循环引用 该参考不必是完整的代码参考 只需是接口 而是在单独的文件中定义接口 例如 假设我有两个接口 Parent 和 Child 它们是双向链接的 这样父级有子级的集合 并且每个子级都有对
  • Angular firestore 查询 firestore 文档

    我有以下查询 selectedUser AngularFirestoreDocument
  • Angular 2将数组传递给路由器queryString

    我想传递一个数组ids 1 2 3 像这样的路由器查询字符串 http some url ids 1 ids 2 ids 3 但是当我尝试使用 const queryParams ids 1 2 3 this router navigate
  • 构建:找不到“节点”的类型定义文件

    VS 2015 社区版 在家 npm 3 10 Angular 2 我试图在 ASP Net MVC 5 应用程序中获取 Angular2 设置 我开始使用的模板使用旧版本的 Angular 因此我更新了包引用 当我构建时 列表中的第一个错
  • Angular Libraries Monorepo:是否可以为每个库使用不同的版本?

    只是一个简单的问题 我似乎找不到答案 我正在尝试构建一个应该能够使用 angular cli v8 的 monorepo 但仍然能够编译和构建为 v2 v3 v4 等制作的库 主要是组件和服务 版本之间发生了很多变化 所以让我们举个例子 V
  • 设置 Angular 2 http 请求的基本 url

    我正在尝试为所有 Angular 2 http 请求设置基本 url 以下是我的应用程序的基本设置 class HttpOptions extends BaseRequestOptions url string http 10 7 18 2
  • 如何判断何时创建新组件?

    我一直在寻找背后的逻辑当有人在 AngularJS Angular 上的 Web 应用程序中创建新组件时但我认为这更通用 可能适用于所有基于组件的前端框架 我知道有像这样的一些原则应该是抽象的和可重用的但例如我在角度文档中看到 每个单独的路
  • Angular2 - 在反应表单上设置日期字段

    我有一个使用两个日期字段的组件 开始日期和结束日期 默认情况下 我禁用了结束日期字段 当他们选择开始日期时我会切换它 this transitionForm this fb group effectiveEndDate value disa
  • Angular 7:ng 测试挂起,不断重复运行测试

    我最近将 Angular 6 应用程序迁移到角7 my 包 json看起来像这样 name myApp version 3 0 0 license MIT scripts ng ng start ng serve public host h
  • 使用组合 API 和 TypeScript 类型系统强类型化 vue 组件的 props

    我正在使用 vue 组合 api 和 typescript 如何使用打字稿输入系统强类型化组件属性 特洛伊 凯西尔的回答并不完全准确 我引用的文档definecomponent https vue composition api rfc n
  • 如何在Foundry Functions中拥有灵活的分组列?

    在我的 Workshop 应用程序中 我想要一个带有可更改 x 轴的条形图 下拉小部件将用于选择所需的 x 轴 为此 我正在编写一个 TypeScript 函数 它将返回为图表小部件提供数据的数据 我写了以下函数 Function publ
  • 在业力测试中按类名获取两个div(Angular 4.0)

    我有这样的看法 div div class header title Example title 1 div div div div class header title Example title 2 div div 在我的业力测试中 我
  • 模块解析失败:意外的标记 (4:0)

    我正在尝试将 FULLCALENDAR 添加到我的 Angular v14 项目中 但在所有设置之后我突然面临这个错误 知道如何处理这个错误吗 包 json fullcalendar angular 5 11 0 fullcalendar
  • 在 TypeScript 中,可以在没有“new”关键字的情况下使用类吗?

    TypeScript 是包含类型的 ES6 Javascript 超集 可以使用以下方式声明一个类class关键字并使用实例化new关键字与 Java 中的关键字类似 我想知道 TypeScript 中是否有任何用例可以在不使用new关键词

随机推荐