Question

我正在尝试使用React Router v4实现一些服务器端身份验证（通过xhr）。我不希望路由转换，直到我向我的服务器验证用户已通过身份验证（通过拥有令牌）以及令牌存储在会话存储中（并非需要异步）。

目前问题是我的私人＆＃34;即使用户未经过身份验证，路由仍在尝试呈现。

我的React路由器路由如下：

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或/（主页）？

Answer 1

我上次尝试你可以使用这样的组件：

import React, {PropTypes} from 'react';
import {Redirect} from 'react-router-dom';
export default class PrivateRoute extends React.Component {
  constructor(props) {
    super(props);
    this.state={loading:true,authenticated:false}
  }
  componentDidMount(){
    /* your authentication logic...*/
    setTimeout(()=>{
      this.setState({loading:false,authenticated:true});
    },3000)
  }
  render() {
    if(this.state.loading)
    return <h1>Loading</h1>;

    if(this.state.authenticated)
    return (this.props.children);
    else
    return <Redirect to="/" />
  }
}

并在你的路由器中使用它：

<Route path="/your-protected-route" component={()=><PrivateRoute><YourComponent /></PrivateRoute>} />

React router v4等待xhr身份验证转换为路由

1 个答案: