0
我想在使用React Router v4時實現一些服務器端身份驗證(通過xhr)。我不希望路由轉換,直到我與我的服務器驗證用戶通過身份驗證(通過擁有令牌)以及令牌存儲在會話存儲中(而不是需要異步)。React路由器v4等待xhr身份驗證過渡到路由
目前的問題是,即使用戶未通過身份驗證,我的「私人」路線仍然嘗試呈現。
我的陣營路由器的路線是這樣的:
class AppContainer extends Component {
render() {
return (
<div>
<main>
<Switch>
<Route exact path='/' component={Home} />
<PrivateRoute path='/dashboard' component={Dashboard} />
</Switch>
</main>
</div>
);
}
}
PrivateRoute
,按指定的樣子:
const isAuthenticated = async() => {
const resp = await axios.get('http://localhost/api/session');
const token = _.get(resp, 'data.success');
const authObj = storage.getFromSession('TOKEN');
return !_.isNil(_.get(authObj, 'Token')) && token;
};
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
isAuthenticated() ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/',
state: { from: props.location }
}}/>
)
)}/>
)
export default PrivateRoute;
儀表板正試圖使即使用戶沒有通過認證。如何等待我的api電話被退回,然後將用戶重定向到/dashboard
或/
(主頁)?
呀類似的東西當然可以工作,但我希望的一個更可維護的方式來與React路由器做到這一點。一旦我獲得多條路線(包括公共和私人路線),管理它可能會有點麻煩。還是)感謝你的建議! – jamez14
您可以使用Mobx或Redux在所有組件之間共享狀態來執行此操作 –
添加Mobx/Redux將不利於解決此問題。這個問題不是國家管理,而是管理多條私人或公共的路線。 – jamez14