在dva.js中如何拦截路由（做登录认证），没有类似vue中的beforeEach钩子函数

Question

现在公司的后台系统使用蚂蚁金服的dva.js，基于react+redux的封装，使用的是dva-cli，现在要做登录认证。react-router-dom中好像没有类似vue中的beforeEach钩子函数，可以拦截路由。importReactfrom'react';import{Router,Route,Switch,Redirect}from'dva/router';importrouterListfrom'./common/routerList';importError404from'./routes/Error/Error404';exportdefaultfunctionRouterConfig({history,app}){consttoken=app._store.getState().user.token;console.log('routergettoken:',token);constRouters=routerList.map((item,index)=>{return{if(item.noAuth){//如果是不用登录就可访问的页面，直接返回return;}else{if(token){return;}else{return}}}}/>});return({Routers}()}/>);}这是我做的路由拦截，但是只有在第一次进入页面，或者页面刷新后才会有效果，应该怎么改呢然后登录的时候，使用this.props.history.push()或者this.props.history.replace()也不能跳转到首页this.props.dispatch({type:'user/saveUserInfo',payload:{userId,nickName,headImageUrl,userName}});this.props.dispatch({type:'user/saveToken',payload:token});letRedirectUrl=this.props.location.state?this.props.location.state.from.pathname:'/';console.log(RedirectUrl);this.props.history.replace(RedirectUrl);

Answer 1

react-router4+在官方教程中给出了一个登录认证的范例。
类似于vue的钩子函数是没有的，因为没有静态路由配置表的概念。主要思想还是通过认证组件包裹你的那些涉及到认证信息的页面组件，在认证组件中实现登录重定向/被包裹组件渲染的逻辑。