项目是一个类似后台管理系统的东西,现在主要分两部分,登录页以及系统里的各种页面
逻辑大概这样:
1、首先进入全局路由配置页,判断本地有没有token,如果没有就重定向到登录页面,如果有token就直接进入系统.
2、如果没有token,就进入登录页面点击登录,派发一个action请求登录接口,成功之后再派发一个action将token存到store,然后再存一份到本地。然后在登录页面判断store里有没有token,如果没有就显示登录表单,如果有就进入系统主页
问题描述:打开系统时进入到了登录页,然后点击登录,就提示死循环。登录接口请求成功了,路由地址也变成了/home。我也没有setState
一、全局路由配置文件
export default class GlobalRouter extends Component {
render() {
const [ loginRoute, ...otherRoutes ] = RadarMonitorRoutes;
let token = localStorage.getItem('token')
return (
<BrowserRouter>
<App>
<Switch>
<Route key={loginRoute.path} path={loginRoute.path} component={loginRoute.component} />
<Route path='/' render={() =>
token ? <DynamicContent>
{
otherRoutes.map( item => <Route key={item.path} path={item.path} component={item.component} />)
}
</DynamicContent>:
<Redirect to='/login' />
}>
</Route>
</Switch>
</App>
</BrowserRouter>
)
}
}
二、登录页
class LoginPage extends Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
//const { remember, ...params } = values;
const { onLogin } = this.props;
onLogin(params)
}
});
};
render() {
const { token } = this.props;
return (
(token && <Redirect to='/home' />) ||
<div className='login-container'>
<LoginHeader />
<LoginForm handleSubmit={this.handleSubmit} {...this.props} />
</div>
)
}
}
三、action文件
const setLoginDataAction = token => ({
type: actionTypes.SET_LOGIN_DATA,
token
})
// 登录获取token信息
export const fetchloginDataAction = (params) => (
dispatch => {
httpUtil.POST('login',params).then( res => {
const { status, data } = res
if(status === 200 && data) {
dispatch(setLoginDataAction(data));// 提示这里不能setState
storageUtil.setItem('token',data)// 这里没有执行
}
}).catch(err => {
console.log(err)
})
}
)
四、报错信息:
楼组怎么解决的,我刚用react 一样我很闷逼