方法是:如在Authorized.jsx中解决,当未登录成功(包括登录失败和登录验证中),就显示loading,否则继续 加载渲染children

一个三目运算或者if分支就可以解决,但是要写到最先加载的路由页面中,这样一开始加载页面时,才能拦住其他的组件的加载,例如:我的项目一开始就加载鉴权组件Authorized,那么

Authorized.jsx

render() {

   if (loading ||  loginCode === 100) {
return <PageLoading />;
} if (loginCode === 400) {
return <Redirect to={`/login`}></Redirect>;
} return children;
}

loginCode 是我根据后台返回的数据,做的判断,当后台未返回时,loginCode 赋值 100,登录失败时,loginCode 赋值 400 ,登录成功,loginCode 赋值 200即可,此时把用户数据存在redux中,其他页面加载时,都可以用得到,这样,我就有效避免由于网络问题,服务未及时返回,而页面先加载取用户数据报错的问题

ant design pro解决初始加载,有顺序的请求/请求顺序报错问题/登录后再加载其他数据/异步的顺序问题/偷跑的更多相关文章

  1. ant design pro v2 关于用户登录有多个权限的解决方法

    ant design pro V2菜单栏显示流程, 用户输入用户名,密码,登录调用登录接口,校验后返回该用户的权限字段currentAuthority,然后通过调用setAuthority(curre ...

  2. ant design pro (六)样式

    一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...

  3. Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行

    ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以 ...

  4. 轻松玩转Ant Design Pro一

    ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...

  5. 测试平台系列(5) 引入Ant Design Pro

    引入Ant Design Pro 回顾 还是继续回顾下之前的作业, 返回的中文变成了ascii字符,不要紧,我们光荣地百度一哈. 随便点进去看看,都可以找到正确答案: 可以看到,我们需要修改confi ...

  6. 阿里开源项目之Ant Design Pro

    本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...

  7. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  8. ant design pro (十四)advanced 使用 CLI 工具

    一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...

  9. ant design pro (十三)advanced 错误处理

    一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...

随机推荐

  1. LG4377 「USACO2018OPEN」Talent Show 分数规划+背包

    问题描述 LG4377 题解 有 \(n\) 个物品,每个物品有两个权值 \(a,b\) 需要确定一组 \(w_i \in [0,1]\) ,使得 \(\frac{\sum{w_i \times a_ ...

  2. 【JS】JS数组添加元素的三种方法

    1.push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 1).语法: arrayObject.push(newelement1,newelement2,....,newelement ...

  3. Java反射方法总结

    1.得到构造器的方法 Constructor getConstructor(Class[] params) -- 获得使用特殊的参数类型的公共构造函数, Constructor[] getConstr ...

  4. 洛谷P5322 (BJOI 2019) DP

    ### 题目链接 ### 分析: 1.用 vector<int> v[i] 来存 i 城堡, s 个对手所安排的士兵数量. 2.设 dp[i][j] 表示 i 城堡前,在当前最大派兵量为  ...

  5. Python 十大装 X 语法(二)

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  6. 【java提高】(16)---java注解(Annotation)

    java提高(16)---java注解 注解含义注解是JDK1.5之后才有的新特性,它相当于一种标记,在程序中加入注解就等于为程序打上某种标记,之后又通过类的反射机制来解析注解. 一.JDK自带注解 ...

  7. 使用ADO.NET实体数据模型

    前景:要操作的数据表必须添加主键(方式:进入数据库-->数据表名-->设计-->列名右键-->设置主键) 可在服务器资源管理器中查看是否设置了主键(主键会有一把钥匙的图样) 1 ...

  8. 资深程序员:学Python我推荐你用这几款编辑器

    Python使用什么编辑比较好,Python编辑器推荐 各位 Pythoner 好啊!在这个烦躁的时代,相聚就是缘分,很高兴各位 Pythoner 能相聚于此,希望接下来的路,我们一起走下去,使用 P ...

  9. pycharm2019.2一个奇怪的bugger,执行后输出内容被莫名处理

    2019-08-20 07:45:07 python爬虫是一直来大家都用的多的,我也是常常用到. requests做请求方便的很,但是今天却遇到requests的bug.text内容不可信. pych ...

  10. npm命令集合

    1.npm初始化项目:npm init 或者 npm init --yes 生产 package.json文件 2.下载package.json安装包: npm install 缩写 npm i