Angular 路由守卫
1. 路由
Angular路由: 可以控制页面跳转;可以在多视图间切换;
2. 路由守卫
Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开、进入某路由;;; return true
代表可以进入当前路由;return false
代表不可以进入当前路由,但可以进入自定义的路由;
3. 路由守卫与路由的关系
路由守卫只只能应用于路由项上;路由守卫可以应用于多个路由项;每个路由项也可以有多个路由守卫;
路由守卫通过实现如下接口来操作:
canActivate
: 控制是否允许进入路由。(通过return true/false决定)canActivateChild
: 等同 canActivate,只不过针对是所有子路由。canDeactivate
: 控制是否允许离开路由。canLoad
: 控制是否允许延迟加载整个模块。
4. 什么情况下,路由项上需要配置路由守卫属性
当需要某些条件/某个身份才能进入的路由,这时需要在路由项上加入路由守卫属性
5. 路由守卫的使用 (本例主要实现根据不同身份进入不同路由)
第一步: guard.service.ts - 定义路由守卫文件
- 第一种写法: 返回Promise对象
@Injectable()
export class GuardService implements CanActivate {constructor(private router: Router, private _http: HttpClient) {}getIsAdmin() {return new Promise((resolve) => {this._http.get('/user/isAdmin').subscribe((resp: boolean) => {resolve(resp);});});}// 进入路由守卫canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return this.getIsAdmin().then((isAdmin) => {if (isAdmin) { // 如果是管理员, 可以进入当前路由;return true;} else {// 如果不是管理员,不能进入当前路由,进入手动导航的ordinary路由;this.router.navigateByUrl('/ordinary');return false;}});}
}
- 第二种写法: 返回Observable对象
@Injectable()
export class GuardService implements CanActivate {constructor(private router: Router, private _http: HttpClient) {}// 进入路由守卫canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {return this._http.get('/user/isAdmin').map((isAdmin) => {if (isAdmin) { // 如果是管理员, 可以进入当前路由;return true;} else {// 如果不是管理员,不能进入当前路由,进入手动导航的ordinary路由;this.router.navigateByUrl('/ordinary');return false;}});}
}
第二步: app.module.ts - 注册路由文件
@NgModule({declarations: [AppComponent],providers: [GuardService],bootstrap: [AppComponent]
})
第三步: app.routing.ts - 给对应的路由项配置路由守卫
// 当导航到front时,需要进入路由守卫的canActivate类进行判断是否可以进入此路由// 什么时候需要在路由项上加路由守卫??当需要某些条件/某个身份才能进入的路由,这时需要在路由项上加入路由守卫属性export const routes: Routes = [{path: '',component: AppComponent,children: [{path: '', redirectTo: 'front', pathMatch: 'full'},{path: 'front', component: FrontendComponent, canActivate: [GuardService]},{path: 'ordinary', component: OrdinaryComponent}]},
];
@NgModule({imports: [RouterModule.forRoot(routes, {useHash: true})],exports: [RouterModule]
})
export class RoutingModule {
}
转载于:https://www.cnblogs.com/zero-zm/p/9846161.html
Angular 路由守卫相关推荐
- angular2.0+之路由守卫
本文转载至:https://segmentfault.com/a/1190000010851032 引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用 ...
- 【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
- angular学习总结-路由和路由守卫
通过命令新建页面news: ng g page news 会在src/app目录下自动生成以下文件,并更新app-routing.module.ts总路由文件. 再来看看app-routing.mod ...
- Angular 路由
Angular 路由 简单路由配置 每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...
- Angular4.0_路由守卫
路由守卫 只有当用户已经登录并拥有某些权限时,才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由. 当用户未执行保存操作, ...
- angular7中路由守卫
路由守卫的作用,在做登录等权限验证的时候,需要用到路由守卫,辅助进行验证. 比如:使用angular做的是单页应用,如果不用任何权限控制的话,就算使用了用户登录功能,假如我们需求是当用户登录成功之后才 ...
- Vue全局路由侦听beforeEach路由守卫附代码使用示例
使用路由守卫beforeEach,可以实现路由侦听: 全局侦听路由跳转的实现代码: app.vue onLaunch: function(e) {this.$router.beforeEach((to ...
- 路由守卫 AJAX,vue路由导航守卫 和 请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...
- 路由守卫-vue切换路由登录判断、条件判断
在vue项目中,切换路由时肯定会碰到需要登录的路由,其原理就是在切换路径之前进行判断,你不可能进入页面再去判断有无登录重新定向到login,那样的话会导致页面已经渲染以及它的各种请求已经发出. 一.如 ...
最新文章
- echarts X轴 或者 Y轴 添加标识线
- Lock free queue 大比拼
- Android获取的状态栏高度,Android中获取状态栏高度的两种方法分享
- 重载练习1_四种不同参数类型的方法
- w怎么接显示 树莓派zero_纯干货!一根线玩转树莓派ZeroW(图文教程,亲测有效)...
- C++ 线程安全的单例模式
- linux如何查看桌面环境变量,如何设置和查看Linux系统的环境变量
- python产品发布会_大型发布会现场的 Wi-Fi 应该如何搭建?
- 回溯法解决0-1背包问题
- 蓝桥杯 BASIC-11 基础练习 十六进制转十进制
- 使用Visual Studio进行单元测试-Part4
- oracle启动数据库错误
- java中事物的注解_JAVA中对事物的理解
- git stash pop 冲突,git stash list 中的记录不会自动删除的解决方法
- ie8打不开java项目_IE8点击打开没反应,尝试多种方法始终打不开
- 武汉大学计算机网络安全学院,消息︱武汉大学计算机学院(新)与国家网络安全学院正式组建...
- matlab同时画n多条曲线,设置颜色及图例
- 青柠开车Spring Cloud(六) —— Spring Cloud Gateway与zuul使用对比
- Billboard(海报粘贴简单的线段树)
- wex5 实战 常用代码模型集合
热门文章
- 【ubuntu】GPU进程kill后,显存未释放(杀死僵尸进程)
- 【Tensorflow】tf.set_random_seed(seed)
- python求最大连续子数组
- 基于bert的语义匹配_构建基于BERT的语义搜索系统…针对“星际迷航”
- 在命令行中打开远程端的图形应用程序
- 买房应该少出首付,多贷款
- 贷款机构如何审核个人征信?
- 不同时期的同学的聚会
- 管理处理器的亲和性(affinity)
- pcb中layer stack manager 中,右上角的layer pairs 、internal layer pairs和build-up,三者的区别?