最近在用umi+antd-pro做项目记录一下出现的问题及踩坑。
解决方案:
import {getDvaApp} from 'umi'; //第一种 getDvaApp()._store.dispatch({ //调用dispatch(所有models都可以) type:"", payload:"" }) getDvaApp()._models所有models的state,resucer,effects都有 //第二种 window.g_app._store.dispatch({}) //这个umi2还可以 umi3就不可以了2.无法登录,点击登录按钮始终在login页(这个问题可能就我有吧!)
pro v4权限流程(可以看看这个)
我是自己写的一个login页没用pro自带的。然后逻辑本地存储都写好了,接口也成功了。但是就是不重定向到首页,始终在登录页。调用了login里的login方法也用history.push("/")还是不行。
解决方案(其实没认真读代码):
原因是SecurityLayout.jsx里做了判断 if (!isLogin && loading) || !isReady)所以必须符合这个才行。
import React from 'react'; import { PageLoading } from '@ant-design/pro-layout'; import { Redirect, connect } from 'umi'; import { stringify } from 'querystring'; class SecurityLayout extends React.Component { state = { isReady: false, }; componentDidMount() { this.setState({ isReady: true, }); const { dispatch } = this.props; if (dispatch) { dispatch({ type: 'user/fetchCurrent', }); } } render() { const { isReady } = this.state; const { children, loading, currentUser } = this.props; // You can replace it to your authentication rule (such as check token exists) // 你可以把它替换成你自己的登录认证规则(比如判断 token 是否存在) const isLogin = currentUser && currentUser.userid; const queryString = stringify({ redirect: window.location.href, }); if ((!isLogin && loading) || !isReady) { //就是这里做了判断所以必须要符合这个才行,当然你可以写自己的逻辑 return <PageLoading />; } if (!isLogin && window.location.pathname !== '/user/login') { return <Redirect to={`/user/login?${queryString}`} />; } return children; } } export default connect(({ user, loading }) => ({ currentUser: user.currentUser, loading: loading.models.user, }))(SecurityLayout);自己做登录时也要保存对应的状态。 需要在点击登录时调用 dispatch({type:"user/saveCurrentUser",payload:currentUser})。保存当前登录人信息。
3.无法热更新问题。
1.如果是个别文件某个组件不更新(可能是config.js路由大小写问题)。
2.如果整个项目都不行(官网给出的是升级版本 ps:我用的umi 2 win7)。
解决方案:
1.清除node_modules下的.cache文件夹。并且删除pages下的.umi文件夹。(遇到先试试这个方法)。
2.升级版本(很不现实,对于老项目和庞大的项目无法立刻升级)
很不现实,对于老项目和庞大的项目无法立刻升级,尤其antd 3和antd 4有些api已经删除。可能会出现其它未知的新产生的问题。(我目前还没解决现在再排查原因)