使用react-router-v4在路由上执行身份验证

使用react-router-v4在路由上执行身份验证

在

react-router v4

，你可以利用

render prop

来

Route

与生命周期方法一起更换

onEnter

功能存在于反应路由器V3。

查看此答案以获取更多详细信息：

react-router v4中的onEnter
prop

但是，由于您要做的只是在onEnter道具中进行身份验证，因此您可以轻松创建一个执行此 *** 作的HOC

const RequireAuth = (Component) => {    return class App extends Component {        componentWillMount() {  const getToken = localStorage.getItem('token');  if(!getToken) {     this.props.history.replace({pathname: '/'});  }         }         render() { return <Component {...this.props} />         }    }}export { RequireAuth }

并像这样使用

<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>

编辑：如果您需要进行网络呼叫以查找是否经过身份验证的使用，则可以将HOC编写为

 const RequireAuth = (Component) => {    return class App extends Component {         state = { isAuthenticated: false, isLoading: true        }        componentDidMount() { AuthCall().then(() => {     this.setState({isAuthenticated: true, isLoading: false}); }).catch(() => {     this.setState({isLoading: false}); })        }         render() { const { isAuthenticated, isLoading } = this.state;if(isLoading) {    return <div>Loading...</div>}if(!isAuthenticated) {    return <Redirect to="/login" />}return <Component {...this.props} />         }    }}export { RequireAuth }

更新：

除了HOC，您还可以选择

PrivateRoute

类似

const PrivateRoute = ({component: Component, isAuthenticated, isLoading, ...rest }) => { if(isLoading) {    return <div>Loading...</div>}if(!isAuthenticated) {    return <Redirect to="/login" />}return <Component {...this.props} />         }    } } export { PrivateRoute };

你可以像这样使用它

  class App extends Component {         state = { isAuthenticated: false, isLoading: true        }        componentDidMount() { AuthCall().then(() => {     this.setState({isAuthenticated: true, isLoading: false}); }).catch(() => {     this.setState({isLoading: false}); })        }         render() { <Router>   <div>       <Route exact path={"/"} component={Home} />       <Route path={"/SignUp"} component={SignUp} />       <Route path={"/SignIn"} component={SignIn} />       <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/>    </div></Router>        }    }