Javascript 如何在react中保护身份验证背后的组件/路径？

您好，我正在尝试使某个路径“/main”仅可供登录用户访问。我有一个loginUser操作，它发送登录请求，然后重定向到“/main”。但是，如果您只在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>
  );
 }

从“React”导入React；
从“react Router dom”导入{Router，Route，Link}；
从“../history”导入历史记录
从“./Journal”导入日记账；
从“./add form”导入AddForm；
从“/旧搜索”导入GetSearch；
从“./SignUp”导入注册；
从“./Front”导入前端；
从“../actions”导入{loginUser}；
导出默认功能应用程序（道具）{
返回(
生命之旅
);
}

下面是我的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);

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“../actions”导入{loginUser}；
从'react redux'导入{connect}；
导出类登录扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
//用户名：“”，
//密码：“”，
}
}
登录（e）{
e、 预防默认值（）；
const userName=this.userName.value；
const passWord=this.passWord.value；
console.log（用户名）；
console.log（密码）；
this.props.logiuser（用户名、密码）；
}
render（）{
返回(
登录开始您的旅程
{this.username=input}}>
{this.password=input}}>
登录
)
}
}
导出默认连接（null，{loginUser}）（登录）；

看起来您正在使用react router v4。他们建议在用户没有适当授权时，使用Route组件上的render prop来呈现重定向。它是一个如下所示的组件：

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

const PrivateRoute=（{component:component，…rest}）=>(
(
伪造的。是否已验证(
) : (
)
)}/>

然后你的应用程序看起来像

   <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>

如何检查用户是否经过身份验证取决于您，即

fakeAuth.isAuthenticated