我目前正在为我的React应用设置基本身份验证。我有一个AppWithAuth
类,该类包装了普通的App和一个Login页面。我的目标是在用户未通过身份验证时重定向到/login
,但允许他们访问其他任何路由,例如/
(仪表板路径),/users
等。
我遇到的问题是该应用希望呈现根目录,但是如果未通过身份验证,则会重定向到登录名。但是由于登录路由已包含在根目录渲染中,因此该应用会无休止地重定向。有什么方法可以达到预期的效果?这是我的代码的要点:
应用程序:
class App extends React.Component {
render() {
return (
<Router> {/* The main routes of the app, e.g. /users... */}
...
</Router>
)
}
}
AppWithAuth:
class AppWithAuth extends React.Component {
isAuthenticated = () => {
// suppose this returns true if user is authenticated, false otherwise
}
render() {
return (
<Router>
<Route path='login' component={Login} />
<Route path='/' render={props => {
return this.isAuthenticated ? (
<App />
) : (
<Redirect to='/login' />
)
}} />
</Router>
)
}
}
答案 0 :(得分:0)
该怎么办?
ProtectedRoute
export default ({ isAuthenticated, component: C, ...rest }) => {
if (isAuthenticated) {
<Route {...rest} render={props => <C {...props} />} />
} else {
return <Redirect to="/login" />
}
}
import ProtectedRoute from './ProtectedRoute'
class App extends React.Component {
isAuthenticated = () => {
// suppose this returns true if user is authenticated, false otherwise
}
render() {
return (
<Router>
<Route path='login' component={Login} />
<ProtectedRoute path='/' component={Main} isAuthenticated={this.isAuthenticated()} />
</Router>
)
}
}
ProtectedRoute
仅接受经过身份验证的用户,其他任何重定向到/ login的用户
答案 1 :(得分:0)
如果使用Switch
,则可以完全匹配路径。在这种情况下,顺序很重要-匹配的第一个路径将破坏开关,就像switch
语句一样。如果需要,您还可以利用exact
属性来完全匹配路径。例如:
<Router>
<Switch>
<Route exact path="/login" component={Login} />
<Route
path="/"
render={props => {
return this.isAuthenticated ? (
<App />
) : (
<Redirect to="/login" />
);
}}
/>
<Route path="/home" component={App} />
</Switch>
</Router>