Question

我正在构建一个全栈的React应用程序。从前端调用堆栈时，我可以操作堆栈并从后端提取信息。我在前端使用axios击中在后端设置的端点。我在前端身份验证时遇到了问题。我正在使用passport和passport-google-oauth20来通过Google OAuth2.0登录用户。我的这个工作正常。我遇到的问题：当用户点击特定的URL（由react-router-dom控制）时，我运行了一个名为authVerify的函数，该函数ping后端并检查用户是否已登录（通过查看Cookie-在JS中无法访问）。该函数正确运行并正确更新状态。我有一个用于身份验证的状态字段最初设置为false，并且在成功200响应后，我将setState设置为true。但是，我建立的受保护路线无效。如果用户通过了身份验证，则他们应该能够转到该路由。如果不是，他们将被重定向到登录页面。但是，所有内容都将重定向到登录页面。

这是Router.js代码：

import React from 'react';
import axios from 'axios';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import PrivateRoute from './PrivateRoute';
import Login from './Login';
import SignUp from './SignUp';
import App from './App';
import NotFound from './NotFound';

class Router extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: false,
    };
  }

  componentDidMount() {
    this.authVerify()
      .then((res) => {
        if (res.status === 200) {
          console.log(this.state);
          this.setState({
            authenticated: true,
          });
          console.log(this.state);
        }
      })
      .catch(err => console.log(err));
  }

  authVerify = () => axios.get('/authVerify')

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <PrivateRoute path="/" component={App} />
          <Route exact path="/pages/signup" component={SignUp} />
          <Route exact path="/pages/login" component={Login} />
          <PrivateRoute path="/pages/dashboard" authenticated={this.state.authenticated} component={App} />
          <Route component={NotFound} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default Router;

这是PrivateRoute.js代码：

import React from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
  <Route
    {...rest}
    render={props => (authenticated === true ? <Component {...props} /> : <Redirect to="/pages/login" />)}
  />
);

export default withRouter(PrivateRoute);

我已经在控制台中记录了来自API的响应，并且成功获得了200响应。我还控制台在调用API之前和之后，在false之前和true之后记录了状态。但是，我总是重定向到登录页面。

我认为问题在于对API的调用花费的时间太长，并且在验证身份验证之前正在安装组件。但是，我认为通过在componentDidMount函数中设置状态可以更新组件并适当地重定向。任何帮助，将不胜感激。

Answer 1

使用专用路由时，我遇到了同样的问题，问题是您的组件是在API调用解决之前呈现的，对我来说，解决方案是等待响应在呈现组件之前完成。

我使用了isSendingRequest，其开头为true，并在之后，阻止了我的组件的渲染（可能会在这种情况下显示微调器）。请求完成，将isSendingRequest设置为false并呈现组件。

希望有帮助！

Answer 2

请始终在所有其他路由的下方添加根路径路由“ /”，例如：

<Route path="/checkout" component={YourComponent} />
.....
.....
<Route path="/" component={App} />

React Router Dom专用路由始终重定向到登录

2 个答案: