Ant-design-pro: Add a loading page

[chenshuai2144]

从这些天的issue和我个人的使用中来看。
不少的业务逻辑需要在路由渲染之前增加一个loading界面，来进行一些数据操作。
从而确认路由的渲染和权限。
是不是可以增加一个loading界面。只有当操作完成了才开始进行用户界面的渲染。
比如：

• 服务器获取自定义菜单
• 渲染前获取用户信息
• 通过数组计算用户的权限
• auth服务进行秘钥获取

我们可以增加一个loading界面，提供一个良好的实践来完成这个功能。

[chenshuai2144]

顺便可以解决无限重定向的问题。

[wunayou]

通过数组计算用户权限 怎么理解啊？？

const a = [1,3,4,5,6,6]
a.some((item)=>item==1)
这种方式？？

[chenshuai2144]

返回一个数组 用户具有[userlist,useradd,userdelete]的权限，就渲染这几个菜单

[longzhaobi]

我就用高阶组件弄了过loading界面

@WithInit
class BasicLayout extends React.PureComponent {

用户只要刷新，或者登录时，就会在这个高阶组件里请求后端获取权限信息和判断菜单权限，这个时候一直处于loading状态，请求完后再显示layouts里的组件

if (initStatus === 'init') {
  return (
    <Spin tip="初始化中，请稍后..." style={{ marginTop: '20%' }}>
      <div style={{ width: '100%', background: 'rgba(50,50,50, 0.1)' }}></div>
    </Spin>
  )
}
return (
<WrappedComponent {...this.props} />
)

在高阶组件的componentWillMount里获取后端权限。

[sangxiaolong]

@chenshuai2144 目前用户的authority是放在localStorage中的，随便改一下就可以切换角色，感觉很不安全，用户的角色以及对应的权限应该放在redux里吧

[longzhaobi]

那个应该不是角色，而是是否有这个权限的标识。如果用户强行改前端，页面就算显示了，请求后端时，肯定也是通过不了的。

[chenshuai2144]

这个issue就是想解决这些问题。我觉得一个loding界面是必要的。
作为一个复杂的管理系统。不大可能直接就加载成功可以使用了。

[chenshuai2144]

@sangxiaolong 会的。将会和用户信息一起mock返回。

应该不是角色，而是是否有这个权限的标识

放在redux里面是为了管理和读取起来比较方便

[longzhaobi]

嗯，我公司的项目也是放到redux里的，这个步骤都是登录后，或者刷新后，在处于loading状态时完成的。

[chenshuai2144]

对。所以觉得loading比较必要。
我现在的系统使用了 auth。
没要获取秘钥之前，访问服务都是401。
不加loading没有办法。

[sangxiaolong]

@chenshuai2144 用户的角色应该放在redux里统一管理起来，在每次 user/fetchCurrent 的时候获取最新的角色或权限，而不是仅在登录完成的时候设置一下权限。现在的弊端是我在后台给一个用户修改了角色，如果用户不主动退出重新登录是没办法看到新的角色对应的菜单的

[longzhaobi]

嗯，到时候看看你们的loading怎么做，公司也安排我每天都要关注你们这个项目的一举一动。

[liuwenzhuang]

@longzhaobi 能请问你的高阶组件怎样控制获取权限失败之后的跳转吗？

[longzhaobi]

@liuwenzhuang 获取权限失败的话，在request里的fetch有处理的啊！比如连接不到后端就提示系统正在维护，登录过期了就直接跳转登录页面。

[chenshuai2144]

981

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.