reactjs प्रतिक्रिया-राउटर- v4 के साथ मार्गों पर प्रमाणीकरण करना



authentication redirect (1)

मैं अपने DashBoard लिए Authentication जाँच लिखने की कोशिश कर रहा हूँ। लेकिन फंक्शन को ही नहीं बुलाया जा रहा है। क्या कोई मुझे इसके लिए कोई समाधान दे सकता है? मैं ReactJs में विकास कर रहा हूं।

यह मार्ग हिस्सा है:

 <Router>
            <div>
              <Route exact path={"/"} component={Home} />
              <Route path={"/SignUp"} component={SignUp} />
              <Route path={"/SignIn"} component={SignIn} />
              <Route path={"/Dashboard"} component={Dashboard} onEnter={this.requireAuth} />
            </div>
          </Router>

यह समारोह है:

  requireAuth (nextState, replace) {
    console.log("?????????????",this.state.getToken);
    if(!this.state.getToken) {
      replace({pathname: '/'});
    }
  }

react-router v4 , आप onEnter v3 में मौजूद onEnter कार्यक्षमता को बदलने के लिए जीवनचक्र विधियों के साथ Route render prop का उपयोग कर सकते हैं।

अधिक विवरण के लिए यह उत्तर देखें:

.com/questions/45429963/…

हालाँकि, जब से आप सभी को करना चाहते हैं, ऑनर प्रॉप में ऑथेंटिकेशन है, तो आप आसानी से एक ऐसा HOC बना सकते हैं जो ऐसा करता है

const RequireAuth = (Component) => { 

    return class App extends Component { 

        componentWillMount() { 
            const getToken = localStorage.getItem('token'); 
            if(!getToken) { 
               this.props.history.replace({pathname: '/'}); 
            } 
        } 
        render() { 
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

और इसका उपयोग करें

<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>

संपादित करें: यदि आपको यह प्रमाणित करने के लिए नेटवर्क कॉल करने की आवश्यकता है कि यदि उपयोग प्रमाणित नहीं है, तो आप HOC लिखेंगे

 const RequireAuth = (Component) => { 

    return class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }

        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           const { isAuthenticated, isLoading } = this.state;
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 

} 

export { RequireAuth }

अद्यतन करें:

HOC के अलावा, आप PrivateRoute घटक की तरह भी जा सकते हैं

const PrivateRoute = ({component: Component, isAuthenticated, isLoading, ...rest }) => { 
           if(isLoading) {
               return <div>Loading...</div>
           }
           if(!isAuthenticated) {
               return <Redirect to="/login" />
           }
           return <Component {...this.props} /> 
        }
    } 
} 

 export { PrivateRoute };

और आप इसे उपयोग कर सकते हैं

  class App extends Component { 
        state = {
            isAuthenticated: false,
            isLoading: true
        }

        componentDidMount() {
            AuthCall().then(() => {
                this.setState({isAuthenticated: true, isLoading: false});
            }).catch(() => {
                this.setState({isLoading: false});
            })
        } 
        render() { 
           <Router>
              <div>
                  <Route exact path={"/"} component={Home} />
                  <Route path={"/SignUp"} component={SignUp} />
                  <Route path={"/SignIn"} component={SignIn} />
                  <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/>
               </div>
           </Router>
        }
    } 




react-router