reactjs - 无法访问 session (存储的 cookie)时如何保护 react 路由？

Question

我正在寻找一种有效的方法来防止未经授权的人访问特定的路由路径。

我从后端获得的 cookie 不可读，所以我不能用它做太多事情。
我有两个端点:

/token (POST) 获取带有 token

的 cookie

/account (GET) 获取用户名和角色

对我到目前为止所做的事情的简短解释:

通过使用 PrivateRoute 组件包装所有路由来保护所有路由

用户尝试登录后会触发一个 redux 操作。此操作调用一个 api，该 api 返回一个 cookie (jwt) 和用户的数据。用户名和角色将保存到“authStore”中。如果登录成功，则同一商店中的属性“isAuthenticated”设置为 True。只有当这个 bool 值设置为 true 时，用户才能访问包装的路由。

我的问题:

如果我关闭我的标签并打开一个新标签，商店会重置(这很好且正常)。 cookie 仍然可用。因此，对于一个好的用户体验，我想直接对用户进行身份验证。目前，用户被重定向到登录页面。这是有道理的，因为 PrivateRoute 组件只有在商店属性 isAuthenticated 为 true 时才能访问。所以用户必须再次登录才能更新商店。

我试图从方法 componentDidMount 在 App.js 中分派(dispatch)一个 Action 以直接获取用户凭据，但这没有帮助。由于首先触发了 render() ，因此它无济于事。

这是我的代码:

应用程序.js:

export class App extends PureComponent {
  componentDidMount() {
    // Action to retrieve user credentials (if available then saves it to the authStore and sets isAuthenticated to true)
    this.props.initloginRequest();
  }

  render() {
    return (
      <div className="d-flex flex-column h-100 w-100 bg-grey main-container">
        <Sprites className="d-none" />
        <Router>
          <Header />
          <Switch>
            <Route path="/login" exact component={X1} />
            <PrivateRoute path="/" exact component={X2} />
            <PrivateRoute path="/details" exact component={X3} />
            <PrivateRoute path="/finish" exact component={X4} />
          </Switch>
        </Router>
      </div>
    );
  }
}

export class PrivateRoute extends Component {
    render() {
        const { isAuthenticated, component, ...rest } = this.props;

        const renderComponent = (props) => {
            if (isAuthenticated) {
                const ComponentToShow = component;
                return <ComponentToShow {...props} />
            } else {
                return <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
            }

        };

        return (
            <Route
                {...rest}
                render={renderComponent}
            />
        )
    }
}

export default connect(
    (state) => ({
        isAuthenticated: state.authStore.isAuthenticated
    })
)(PrivateRoute);

通过根据返回的状态代码对/account 进行 api 调用，有一个可能的解决方案。每当更改路线时，都会进行调用，因此这并不是我真正想要的。我只想要一个在应用程序开始时需要一个调用的解决方案。

提前致谢

Answer 1

我通过在 index.js(src 路径)中调度一个 Action 解决了这个问题:

import './index.css';
import App from './App';

import { initloginRequest } from './actions/auth';

const store = configureStore();
store.dispatch(initloginRequest())

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'),
);

此操作调用 api 并检查用户是否已通过身份验证。因此，当它到达我的 PrivateRoute 组件时，它知道应该将用户重定向到哪个方向。

您应该在您的商店/状态中将 isFetching 设置为 true，直到操作完成以防止 App.js 呈现您的路线。

export class App extends PureComponent {

  render() {
    const { isFetching } = this.props

    if (isFetching) {
      return <div>Loading application...</div>
    }

    return (
      <div className="d-flex flex-column h-100 w-100 bg-grey main-container">
        <Sprites className="d-none" />
        <Header />
        <Switch>
          ...private route etc...
        </Switch>

      </div>
    );
  }
}

export default connect(
  (state) => ({
    isFetching: state.authStore.isFetching,
  }),
  (dispatch) => bindActionCreators({
  }, dispatch),
)(App);

这应该可以解决问题。