反応の中で認証の背後にあるコンポーネント/パスを保護する方法は？

Question

こんにちは私は、特定のパス "/ main"をログインしているユーザーだけにアクセス可能にしようとしています。私は、ログイン要求を送信して "/ main"にリダイレクトするloginUserアクションを持っています。しかし、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

それはあなたのように見えます反応ルータv4を使用しています。ユーザーが適切な権限を持っていない場合は、ルートコンポーネントのレンダリングプロペラを使用してリダイレクトをレンダリングすることをお勧めします。 、その後、あなたのアプリケーションは、あなたが認証されたユーザーはあなた次第ですかどうかを確認する方法

<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

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

とを：それはこのようになりますコンポーネントです