angular 路由守卫Observable异步请求串联
假设路由守卫有这种场景
需要使用observable同时发送多个Http 请求,判断request2返回的数据中是否存在request1返回的数据
使用async await
export class testAuth implements CanActivate {
username = localStorage.getItem("username");
EmployeeNo: any;
constructor(
private dpaService: DpaService,
private testService: TestService,
) { }
async canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Promise<boolean | UrlTree> {
try{
if(this.username){
//forkJoin同时发送多个http请求
return await forkJoin([this.dpaService.getUserByEmail(this.username),this.testService.queryAll()])
.toPromise().then((results:any)=>{
//results为多个请求返回的结果数组
this.EmployeeNo = results[0][0].EmployeeNo;
return results[1].filter((element: any)=>element.emplId === this.EmployeeNo).length>0;
});
}
else{
return false;
}
} catch(err){
return false;
}
}
}
angular 路由守卫Observable异步请求串联的更多相关文章
- Angular路由守卫 canDeactivate
目的 离开页面时,做出逻辑判断 以ng-alain的项目为基础做演示 效果如图: 关键代码 定义一个CanDeactivateGuardService export class CanDeactiva ...
- Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
- Angular路由守卫 canActivate
作用 canActivate 控制是否允许进入路由. canActivateChild 等同 canActivate,只不过针对是所有子路由. 关键代码 创建路由守卫 import { Injecta ...
- angular路由守卫
路由守卫是指当用户满足了某些要求之后才可以离开或者进入某个页面或者场景的时候使用.比如说只有当用户填写了用户名和密码之后才可以进入首页,比如说用户离开某个页面时明月保存信息提示用户是否保存信息后再离 ...
- 微信小程序 路由跳转 异步请求 存储数据,微信登录接口
1小程序路由跳转 wx.switchTab(Object object) 这里的tabBar是底下的导航栏指定的页面 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 tabBar l ...
- angular4.0 路由守卫详解
在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Ang ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- Angular路由——路由守卫
一.路由守卫 当用户满足一定条件才被允许进入或者离开一个路由. 路由守卫场景: 只有当用户登录并拥有某些权限的时候才能进入某些路由. 一个由多个表单组成的向导,例如注册流程,用户只有在当前路由的组件中 ...
- angular路由详解六(路由守卫)
路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...
- angular 2+ 路由守卫
1. 定义接口名称 /domain/login-guard.ts export interface LoginGuard { data: any; msg: string; status: boole ...
随机推荐
- 代码小DEMO随笔---JS原生手机版本alert弹框
之前的随笔写的是WEB版本的弹框,这次是手机版本,欢迎路过的大佬们提出更好的写法~~ <!DOCTYPE html> <html lang="en"> &l ...
- VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
VUE基础之:visible.sync-模态框显示隐藏.elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了,最近终于有时间拉出来写完了.... 我们日常开 ...
- 阿里百秀后台管理项目笔记 ---- Day04
来吧展示: step 1 : 实现评论管理数据渲染 利用 ajax 创建接口得到数据使用模板引擎渲染页面 1.1 引入文件 <script src="/static/assets/ve ...
- 在windows系统下用vscode构造shell脚本IDE
1.基础环境搭建 安装Visual Studio Code(VScode ) 下载地址:https://code.visualstudio.com/Download 下载完双击文件,选择路径安装即可, ...
- Python标准库pathlib及实例操作
Python标准库pathlib及实例操作 https://docs.python.org/zh-cn/3.9/library/pathlib.html 官网 讲的比较好的文章 https://zhu ...
- 《Terraform 101 从入门到实践》 第五章 HCL语法
<Terraform 101 从入门到实践>这本小册在南瓜慢说官方网站和GitHub两个地方同步更新,书中的示例代码也是放在GitHub上,方便大家参考查看. 介绍了Terraform一些 ...
- Hugging Face 每周速递: 扩散模型课程完成中文翻译,有个据说可以教 ChatGPT 看图的模型开源了
每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...
- 郁金香 中级班 1.c++的类和对象
#include<stdio.h> class 生物 { public: 生物() { printf("我是构造函数\n"); } int id1; int id2; ...
- vant ui rem配置流程
参考地址 https://www.cnblogs.com/WQLong/p/7798822.html 1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 n ...
- TCP/IP协议(4): 地址解析协议(ARP) —— 网络地址转换为物理地址的方式
TCP/IP协议(4): 地址解析协议(ARP)--网络地址转换为物理地址的方式 关于地址解析协议(Address Resolution Protocol, ARP) 关于 ARP 地址解析协议(Ad ...