react的路由權限控制

在使用路由的時候，有的時候咱們的界面只可以在登陸以後才能夠看的到，這個時候就須要使用路由權限控制了

找了資料發現一個就是我使用的方法，一個是高階組件。 原諒菜鳥看不太懂不會使用高階組件…………

首先在路由中作一個私有權限的限制，限制裏面的path就是你的私有界面

 router.js

 <Switch>
      <Route path="/" exact component={Home} />
      <PrivateRoute  path="/MyOptional"  component={MyOptional} />
      <Route render={() => <Redirect to="/" />} />
</Switch>

想要跳轉到path的裏面，首先在PrivateRoute裏面作登陸判斷條件

private.js

import React from 'react';
import {Route,Redirect,withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
//私有路由，只有登陸的用戶才能訪問
class PrivateRoute extends React.Component{
    componentWillMount(){
        let  isAuthenticated =  sessionStorage.getItem("userName") ? true :false;
        this.setState({isAuthenticated:isAuthenticated})
        if(!isAuthenticated){
            const {history} = this.props;
            setTimeout(() => {
                history.replace("/");
            }, 1000)
        }
    }
    render(){
        let { component: Component,path="/",exact=false,strict=false} = this.props;
        return this.state.isAuthenticated ?  (
            <Route  path={path} exact={exact}  strict={strict}  render={(props)=>( <Component {...props} /> )} />
        ) :  <Redirect
            to={{
                pathname: "/",
            }}    //這裏必須使用redireact不能和上面同樣使用<Route/>  由於會出現頁面先跳轉到myOption而後再跳轉到首頁的情況，這樣用戶體驗很差
        /> ;
    }
}
PrivateRoute.propTypes  ={
    path:PropTypes.string.isRequired,
    exact:PropTypes.bool,
    strict:PropTypes.bool,
    component:PropTypes.func.isRequired
}
export default withRouter(PrivateRoute);

這樣就ok了

注：由於個人登陸界面是在首頁或者各個界面的模態框，因此這裏個人路徑直接都是若是沒有登陸，直接跳轉首頁的。若是你們的登陸界面是單獨的，那能夠直接跳轉到登陸界面了

還有個tips就是，若是你的界面沒有在路由中進行聲明，而後又想要在界面中使用route相關的路徑參數，就能夠引入withRouter，在this.props中獲得了