如何使用 react-router 处理身份验证？

IT技术 javascript reactjs react-router-v4
2021-04-05 14:06:05

尝试使某些路由需要身份验证。

我有这个： 

class App extends Component {
  render() {
    const menuClass = `${this.props.contentMenuClass} col-xs-12 col-md-9`;
    return (  
      <BrowserRouter history={browserHistory}>
        <div className="App">
          <Header properties={this.props} />
            <div className="container-fluid">
              <div className="row">
                <SideNav />
                <div className={menuClass} id="mainContent">
                  <Switch>
                    {routes.map(prop =>
                        (
                          <Route
                            path={prop.path}
                            component={prop.component}
                            key={prop.id}
                            render={() => (
                              !AuthenticationService.IsAutheenticated() ? 
                                <Redirect to="/Login"/>
                               : 
                               <Route path={prop.path}
                               component={prop.component}
                               key={prop.id}/>

                            )}
                          />
                        ))}
                  </Switch>
                </div>
              </div>
            </div>
          {/* <Footer /> */}

        </div>

      </BrowserRouter>
    );
  }
}

const mapStateToProps = state => ({
  contentMenuClass: state.menu,
});

export default connect(mapStateToProps)(App);

注意：是的，身份验证服务可以正常工作。

对于每条路线，我都在检查用户是否经过身份验证，如果没有，那么我想将他们重定向到登录页面，如果是，那么它将以“/”的路线登陆第一页。

我得到的是： 

react-dom.development.js:14227 The above error occurred in the <Route> component:
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by Connect(App))
    in Connect(App)
    in Provider

我哪里做错了？

2个回答

一个简单的解决方案是制作一个HOC包含所有受保护路由的（高阶组件）。

根据您的应用程序的嵌套方式，您可能希望使用本地状态或redux状态。

工作示例：https : //codesandbox.io/s/5m2690nn6n（使用本地状态）

路线/ index.js

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Home from "../components/Home";
import Players from "../components/Players";
import Schedule from "../components/Schedule";
import RequireAuth from "../components/RequireAuth";

export default () => (
  <BrowserRouter>
    <RequireAuth>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/players" component={Players} />
        <Route path="/schedule" component={Schedule} />
      </Switch>
    </RequireAuth>
  </BrowserRouter>
);

组件/RequireAuth.js

import React, { Component, Fragment } from "react";
import { withRouter } from "react-router-dom";
import Login from "./Login";
import Header from "./Header";

class RequireAuth extends Component {
  state = { isAuthenticated: false };

  componentDidMount = () => {
    if (!this.state.isAuthenticated) {
      this.props.history.push("/");
    }
  };

  componentDidUpdate = (prevProps, prevState) => {
    if (
      this.props.location.pathname !== prevProps.location.pathname &&
      !this.state.isAuthenticated
    ) {
      this.props.history.push("/");
    }
  };

  isAuthed = () => this.setState({ isAuthenticated: true });

  unAuth = () => this.setState({ isAuthenticated: false });

  render = () =>
    !this.state.isAuthenticated ? (
      <Login isAuthed={this.isAuthed} />
    ) : (
      <Fragment>
        <Header unAuth={this.unAuth} />
        {this.props.children}
      </Fragment>
    );
}

export default withRouter(RequireAuth);

或者，您可以创建一个包含受保护路由的受保护组件，而不是包装路由。

工作示例：https : //codesandbox.io/s/yqo75n896x（使用redux而不是本地状态）。

路线/ index.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import Home from "../components/Home";
import Header from "../containers/Header";
import Info from "../components/Info";
import Sponsors from "../components/Sponsors";
import Signin from "../containers/Signin";
import RequireAuth from "../containers/RequireAuth";
import rootReducer from "../reducers";

const store = createStore(rootReducer);

export default () => (
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/info" component={Info} />
          <Route path="/sponsors" component={Sponsors} />
          <Route path="/protected" component={RequireAuth} />
          <Route path="/signin" component={Signin} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
);

容器/RequireAuth.js

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import ShowPlayerRoster from "../components/ShowPlayerRoster";
import ShowPlayerStats from "../components/ShowPlayerStats";
import Schedule from "../components/Schedule";

const RequireAuth = ({ match: { path }, isAuthenticated }) =>
  !isAuthenticated ? (
    <Redirect to="/signin" />
  ) : (
    <div>
      <Route exact path={`${path}/roster`} component={ShowPlayerRoster} />
      <Route path={`${path}/roster/:id`} component={ShowPlayerStats} />
      <Route path={`${path}/schedule`} component={Schedule} />
    </div>
  );

export default connect(state => ({
  isAuthenticated: state.auth.isAuthenticated
}))(RequireAuth);

您甚至可以通过创建包装函数来获得更多module化。您可以通过简单地包裹组件来挑选和选择任何路线。我没有代码框示例，但它与此设置类似。

例如： <Route path="/blog" component={RequireAuth(Blog)} />

这感觉比我尝试的要好得多。会尝试！
2021-05-27 14:06:05
没想到会得到这个，但我很高兴我做到了。优秀的答案和一个很棒的活生生的例子！我确实有一个错字，但它仍然没有按我想要的方式工作（在我最初的尝试中）。然而，这是一个更好的方法。谢谢！
2021-06-11 14:06:05

你拼错Autheenticated了。

此外，这是一个假设，因为您只提供了堆栈跟踪而不是above error，这可能表示AuthenticationService.IsAutheenticated不是函数。

实际上是方法本身的错误。这是一个错字，但该方法是这样调用的。
2021-06-18 14:06:05
其它你可能感兴趣的问题
上一篇npm WARN deprecated tar@2.2.2：不再支持此版本的 tar，并且不会收到安全更新。请尽快升级 下一篇在nextjs中获取URL路径名