javascript - 如何使用 react-router 处理身份验证?
问题描述
尝试使某些路由需要身份验证。
我有这个:
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
我在哪里做错了?
解决方案
一个简单的解决方案是制作一个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);
您甚至可以通过创建包装函数来获得更多模块化。您可以通过简单地包裹组件来挑选和选择任何路线。我没有代码框示例,但它类似于此设置。
例如:<Route path="/blog" component={RequireAuth(Blog)} />
推荐阅读
- windows - 当进程不存在时如何使用powershell杀死进程而不会出错
- r - R通过具有多年观察的变量连接表
- javascript - 游戏功能
- influxdb - Influxdb 2.0 Flux - 如何返回 0 而不是 null
- android - Android 库忽略依赖项
- linux - 使用 tar.lz4 压缩文件夹并将其拆分为 10G 文件
- python - 我无法让 strip() 成功从 IP 地址中删除单引号
- mysql - SQL:“END”附近的语法错误,原因不明
- c# - 如何使用适用于 Windows 10、8 的 C# windows form 应用程序配置 ad hoc 网络
- python - 如何从函数返回集合