javascript - 手动输入链接时的重定向，react-router props 的其他问题

Question

我在我的应用程序中遇到一个问题，当用户经过身份验证并手动输入他有权访问的所需链接地址时，页面会将他重定向到主页。仅单击链接时不会发生这种情况。

代码如下:

const asyncCheckout = asyncComponent(() => {
    return import('./containers/Checkout/Checkout');
});

const asyncOrders = asyncComponent(() => {
    return import('./containers/Orders/Orders');
});

const asyncAuth = asyncComponent(() => {
    return import('./containers/Auth/Auth');
});

class App extends Component {
    componentDidMount() {
        this.props.onTryAutoSignup();
    }

    render() {
        let routes = (
            <Switch>
                <Route path="/auth" component={asyncAuth} />
                <Route path="/" exact component={BurgerBuilder} />
                <Redirect to="/" />
            </Switch>
        );

        console.log('Is authenticated: ' + this.props.isAuthenticated);
        console.log(routes.props.children);


        if (this.props.isAuthenticated) {
            routes = (
                <Switch>
                    <Route path="/checkout" component={asyncCheckout} />
                    <Route path="/orders" component={asyncOrders} />
                    <Route path="/logout" component={Logout} />
                    <Route path="/auth" component={asyncAuth} />
                    <Route path="/" exact component={BurgerBuilder} />
                    <Redirect to="/" />
                </Switch>
            );

        }

        console.log('Is authenticated: ' + this.props.isAuthenticated);
        console.log(routes.props.children);

        return (
            <div>
                <Layout>
                    {routes}
                </Layout>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        isAuthenticated: state.auth.token !== null
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onTryAutoSignup: () => dispatch(actions.authCheckState())
    };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

以下是手动输入链接时 console.logs 显示的内容:

Is authenticated: false
App.js:38 Array(3)
App.js:55 Is authenticated: false
App.js:56 Array(3)
App.js:37 Is authenticated: true
App.js:38 Array(3)
App.js:55 Is authenticated: true
App.js:56 Array(6)

似乎是这样做的，因为当手动输入地址时，页面必须重新加载，这就是为什么用户首先总是未经身份验证的原因。

我尝试弄乱 react 路由器给我们的 Prop ，以便以某种方式仍然成功地将用户重定向到正确的页面，但是 this.props.match.url 和 this.props.match.path 始终设置为“/”，即使单击链接时也是如此。

所以我的两个问题是:

1. 当用户手动输入所需地址并经过身份验证( token 在 localStorage 中设置)时，我应该如何处理重定向？
2. 我应该如何解决 react 路由器的情况？

Answer 1

实际上，您应该在应用程序的初始化时执行此操作。例如，在 index.js 文件中。

像这样 - index.js 文件:

....
const store = createStoreWithMiddleware(reducers);
const token = localStorage.getItem('token');
if (token) {
  store.dispatch(authCheckState());
}
...

因此，每次加载应用程序时，它都会检查当前用户的状态，并且您的容器将获取更新的信息。

此外，我更喜欢使用授权 HoC 而不是覆盖路由。

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Route, Redirect} from 'react-router-dom'

export const PrivateRoute = ({component: ComposedComponent, ...rest}) => {

  class Authentication extends Component {

    /* Redirect if not authenticated; otherwise, return the component imputted into <PrivateRoute /> */
    handleRender = props => {
      if (!this.props.isAuthenticated) {
        return <Redirect to="auth" />
      } else {
        return <ComposedComponent {...props}/>
      }
    }

    render() {
      return (
        <Route {...rest} render={this.handleRender}/>
      );
    }
  }

  const mapStateToProps = state => {
    return {
      isAuthenticated: state.auth.token !== null
    };
  }

  const AuthenticationContainer = connect(mapStateToProps)(Authentication);
  return <AuthenticationContainer/>
};

然后在您的路由中，您可以使用此 HoC 来检查用户是否已登录，然后才能访问特定路由:

<Switch>
    <PrivateRoute path="/checkout" component={asyncCheckout}/>
    <PrivateRoute path="/orders" component={asyncOrders}/>
    <PrivateRoute path="/logout" component={Logout}/>
    <Route path="/auth" component={asyncAuth}/>
    <Route path="/" exact component={BurgerBuilder}/>
    <Redirect to="/" />
</Switch>