Angular路由里的canActivate用法

看个具体的例子。

const CUSTOM_ROUTES: Routes = [{ path: "custom/:id", component: RouteDemoComponent,data:{ name: 'jerry'},canActivate: [CanActivateTeam] }
];

canActivate的类型是数组，而不是单个元素。

在app.module.ts的providers里，导入CanActivateTeam:

canActivateTeam的实现：

@Injectable()
export class CanActivateTeam implements CanActivate {constructor(private permissions: JerryPermissions, private currentUser: UserToken) {}canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {return this.permissions.canActivate(this.currentUser, route.params.id);}
}

permissions的实现：

export class UserToken {}
export class JerryPermissions {canActivate(user: UserToken, id: string): boolean {console.log('Jerry');return true;}
}

运行时数据：

大部分字段的值都是从Route interface里带过来的。

使用依赖注入获得CanActivateTeam的实例：

根据token，对实例进行hydrate：

record里包含了Component 工厂：

依赖注入完成：

更多Jerry的原创文章，尽在：“汪子熙”:

Angular路由里的canActivate用法相关推荐

angular路由详解
angular路由路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分. 那么,对于 angular 而言,它自然也有 ...
Angular 路由
Angular 路由简单路由配置每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...
angular路由移除#号(跟nginx)
刚进公司,公司使用的angular.js(1.3.0),主管跟我说要我移除angular项目访问路径URL里的#号移除(针对百度seo问题后来发现angular天生不适合做seo). angularj ...
Angular 路由的wild匹配
我如果在Angular Component里输入一个并不存在path配置的url,会遇到如下错误消息: ERROR Error: Uncaught (in promise): Error: Canno ...
Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Angular应用里setTimeout被如何被monkey patched的
monkey patched: monkey patch指的是在运行时动态替换,一般是在startup的时候. 下面的测试代码可以让我们弄清楚,浏览器支持的原生函数setTimeout,是如何在Ang ...
Angular应用里的tsconfig.app.json
tsconfig.app.json是tsconfig.json的扩展: 在应用工程文件angular.json里的tsConfig字段处被引用: ng build后的输出: 2020年10月4日国庆节 ...
Angular应用里的Template Reference变量
Angular应用里的Template Reference Variable,模板引用变量,用于创建一个对模板里DOM元素或者Angular指令的引用. 使用#号定义一个模板引用变量. 看个具体的例子 ...

Angular路由里的canActivate用法

Angular路由里的canActivate用法相关推荐

最新文章

热门文章