如何确保在身份validation背后的组件/path反应？

你好，我正在尝试做一个特定的path“/主”只能login用户访问。 我有一个loginUser操作发送login请求，然后redirect到“/主”。 但是，如果您只需在没有login的localhost：3000之后键入“/ main”，仍然可以进入“/ main”。 任何帮助赞赏。

这是我的行动：

export function loginUser(username1, password1) { const mainPage = (response, dispatch) => { if(true) { history.push('/main'); } dispatch({ type: POST_DATA_SUCCESS, response, }); }; const promise = fetch('http://localhost:8080/users/login', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', 'Authorization': 'Basic ' + btoa(username1 + ":" + password1), }, body: JSON.stringify({ username: username1, password: password1, }) }); return { onRequest: POST_DATA_TRIGGERED, onSuccess: mainPage, onFailure: POST_DATA_FAILURE, promise, }; } 

这是我的app.js：

 import React from 'react'; import {Router, Route, Link} from 'react-router-dom'; import history from '../history' import Journal from './journal'; import AddForm from './add-form'; import GetSearch from './old-search'; import SignUp from './signup'; import Front from './front'; import { loginUser } from '../actions'; export default function App(props) { return( <Router history={history}> <div> <h3><Link className="title-journey" to="/">A Journey of Life</Link> </h3> <main> <Route exact path="/" component={Journal} /> <Route path="/sign-up" component={SignUp} /> <Route path="/add" component={AddForm} /> <Route path="/get" component={GetSearch} /> <Route path="/main" component={Front} /> </main> </div> </Router> ); } 

这里是我的login.js组件：

  import React from 'react'; import {BrowserRouter as Router, Route, Link} from 'react-router-dom'; import { loginUser } from '../actions'; import { connect } from 'react-redux'; export class Login extends React.Component { constructor(props) { super(props); this.state = { //username: '', //password: '', } } login(e) { e.preventDefault(); const userName = this.username.value; const passWord = this.password.value; console.log(userName); console.log(passWord); this.props.loginUser(userName, passWord); } render() { return( <form> <h3>Login to start your Journey</h3> <input placeholder="username" ref={input => {this.username = input}}> </input> <input placeholder="password" type="password"ref={input => {this.password = input}}></input> <button onClick={this.login.bind(this)}>Login</button> </form> ) } } export default connect(null, { loginUser })(Login); 

Answer 1

看起来你正在使用react-router v4。 他们build议在用户没有适当的授权时使用Route组件上的渲染道具来呈现redirect。 这是一个看起来像这样的组件：

 const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> 

然后你的应用会看起来像

  <main> <Route exact path="/" component={Journal} /> <Route path="/sign-up" component={SignUp} /> <Route path="/add" component={AddForm} /> <Route path="/get" component={GetSearch} /> <PrivateRoute path="/main" component={Front} /> </main> 

您如何检查用户是否通过身份validation取决于您，即fakeAuth.isAuthenticated