反応ルータ4ルートを保護する

Question

リアクタの最新バージョンを使用して新しいプロジェクトを開始しました。

私はAuthコンポーネントでラップされたルートを持っています。

<Route exact path="/" render={ (props) => (
     <Auth loggedIn={this.state.loggedIn}> 
     <Dashboard {...props} deletePage={this.deletePage} pages={this.state.pages} /> 
     </Auth> 
    )} /> 

アプリケーションコンテナは、AuthコンポーネントにLOGGEDINの状態を送信します。

class Auth extends Component { 
    constructor(props) { 
    super(props) 
    console.log(this.props.loggedIn) 
    } 

    componentDidMount(){ 
    return !this.props.loggedIn ? window.location.replace('/admin/login') : null 
    } 

    render() { 
    return (
     <div> 
     {this.props.loggedIn ? this.props.children : null} 
     </div> 
    ) 
    } 
} 

しかし、中には、私は簡単にだけtrueに状態を変更し、サイトへのフルアクセスを持つことができる開発ツールを反応します。これに対処する最善の方法は何ですか？

Answer 1

まあ、 セキュリティはクライアントの関心事ではありません。これはデータレイヤーで行われることです。

コンソールを開いている誰かがisLoggedIn = trueを設定しても、サーバーは何もしないようにしてください。ところで

、 （私の意見では）良い方法は、非同期サーバサイドのリソース権限を提供することである。現在のユーザーが実行することができますどのようなサーバーを頼む...

ルータがミドルウェアを持ってリアクトしたがって、これは実装が本当に簡単です。