React 路由器第一路由，没有菜单或主布局

Question

我正在学习React，我遇到了React Router。我已经完成了基本的路由教程，但我还没有实现我的目标，因为我输了。

我想首先渲染我的登录组件，没有主导航，只有纯登录，如果成功，那么它将进入带有主导航的主应用程序(呈现链接(。

我不希望使用任何其他路由的登录显示为链接。

所以，我试图在我的组件DidMount中验证这一点，但我不知道这个重定向组件是否像那样工作。如果我的登录组件具有路由器，则其他组件将在登录名下方呈现。

这是我的登录组件，以非常基本的方式使用引导程序：

import React, { Component } from 'react';
// import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import logo from '../logo.svg';
import axios from 'axios';
// import TodosList from "./todos-list.component";
class Login extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password: ''
}
}
componentDidMount() {
const token = localStorage.getItem('token');
}
auth = (e) =>{
e.preventDefault();
axios.post('http://localhost:4000/api/login', {
email: this.state.email,
password: this.state.password
})
.then(response => {
console.log(response.headers['x-auth-token']);
if (response.headers['x-auth-token']){
localStorage.setItem('token', response.headers['x-auth-token']);
}
})
.catch(error => {
alert(`Usuario o Password Invalido`);
this.setState({
email: '',
password: ''
});
});
};
onEmailChange = (e) =>{
this.setState({
email: e.target.value
});
};
onPasswordChange = (e) =>{
this.setState({
password: e.target.value
});
};
render(){
return (
<div className="container h-100">
<div className="row h-100 justify-content-center align-items-center">
<form onSubmit={this.auth}>
<img src={logo} className="img-thumbnail"/>
<div className="form-group">
<label>Email</label>
<input value={this.state.email} onChange={this.onEmailChange} type="email"
className="form-control" placeholder="Enter E-mail address"/>
</div>
<div className="form-group">
<label>Password</label>
<input value={this.state.password} onChange={this.onPasswordChange} type="password"
className="form-control" placeholder="Enter Password"/>
</div>
<button type="submit" className="btn btn-primary col-sm-12">Login</button>
</form>
</div>
</div>
);
}
}
export default Login;

请刷新一下，我看到很多文章使用链接进行主布局，但一开始我想仅显示我的登录组件作为开始屏幕，顶部没有菜单链接。然后重定向到我的主应用程序，如果登录成功，则带有链接。

Answer 1

如果你想保护应用程序中的特定路由，那么你真的应该做一些事情，就像 react 训练对受保护的路由所做的那样 反应身份验证工作流. 但是，如果您想保护整个应用程序，只需在应用程序的根目录中执行一个简单的 if 语句即可。 如果没有身份验证返回，则登录将返回应用程序，如下所示：

代码沙盒示例

const App = () => {
//Your authentication logic goes here or in a context component
// If authentication is false then just return the login component
if(!auth) return <Login/>
// If authentication is successful then return the app
return (
<div className="App">
<BrowserRouter>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/page">Page</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/page" component={Page} />
</Switch>
</BrowserRouter>
</div>
);
}
export default App;

这显然是如何做到这一点的简化版本，但我希望它很简单，这样你就可以看到它是如何轻松完成的。 您应该真正将身份验证令牌存储在上下文存储或其他东西中，以便您可以轻松使用该令牌。此外，如果您想要一些公共路线，您应该真正研究上面的链接以应对训练。 但是，如果您只想保护整个应用程序，那么您可以像上面一样执行一个简单的if语句。