चेक अगर में प्रवेश किया गया - प्रतिक्रिया रूटर अनुप्रयोग ES6

Question

मैं लिख रहा हूँ एक प्रतिक्रिया .js आवेदन (v15.3) प्रतिक्रिया रूटर (v2.8.1) और ES6 वाक्य रचनाका उपयोग कर। मुझे राउटर कोड को पृष्ठों के बीच सभी संक्रमणों को रोकने के लिए नहीं मिल सकता है ताकि यह जांच सके कि उपयोगकर्ता को पहले लॉगिन करना है या नहीं।

मेरे शीर्ष स्तर प्रस्तुत करना विधि बहुत सरल है (एप्लिकेशन के रूप में अच्छी तरह से मामूली बात है):

render() 
    { 
     return (
     <Router history={hashHistory}> 
      <Route path="/" component={AppMain}> 
       <Route path="login" component={Login}/> 
       <Route path="logout" component={Logout}/> 
       <Route path="subject" component={SubjectPanel}/> 
       <Route path="all" component={NotesPanel}/> 
      </Route> 
     </Router> 
    ); 
    } 

सभी वेब उपयोग ES5 कोड पर नमूनों या प्रतिक्रिया रूटर के पुराने संस्करणों (पुराने संस्करण 2 की तुलना में) , और मिश्रित (बहिष्कृत) और इच्छाशक्ति के साथ मेरे विभिन्न प्रयास (कभी नहीं कहा जाता है) विफल हो गया है।

उपयोगकर्ता द्वारा अनुरोध किए गए पृष्ठ पर उतरने से पहले उपयोगकर्ताओं को प्रमाणित करने के लिए मजबूर करने के लिए वैश्विक 'इंटरसेप्टर फ़ंक्शन' कैसे स्थापित किया जा सकता है?

Answer 1

onEnter कॉलबैक के इस संस्करण में अंत में प्रतिक्रिया-रूटर (v2.8) के लिए काम किया:

requireAuth(nextState, 
       replace) 
    { 
     if(!this.authenticated()) // pseudocode - SYNCHRONOUS function (cannot be async without extra callback parameter to this function) 
     replace('/login') 
    } 

लिंक जो बताते हैं प्रतिक्रिया रूटर V1 के बीच पुनर्निर्देशन मतभेद वी 2 बनाम here है। नीचे (प्रतिक्रिया रूटर संस्करण 2.8.1)

Likewise, redirecting from an onEnter hook now also uses a location descriptor. 

// v1.0.x 
(nextState, replaceState) => replaceState(null, '/foo') 
(nextState, replaceState) => replaceState(null, '/foo', { the: 'query' }) 

// v2.0.0 
(nextState, replace) => replace('/foo') 
(nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } }) 

पूर्ण कोड लिस्टिंग: प्रासंगिक अनुभाग नीचे उद्धृत

requireAuth(nextState, 
       replace) 
{ 
    if(!this.authenticated()) // pseudocode - SYNCHRONOUS function (cannot be async without extra callback parameter to this function) 
    replace('/login'); 
} 

render() { 
    return (
    <Router history={hashHistory}> 
     <Route path="/" component={AppMain}> 
      <Route path="login" component={Login}/> 
      <Route path="logout" component={Logout}/> 
      <Route path="subject" component={SubjectPanel} onEnter={this.requireAuth}/> 
      <Route path="all" component={NotesPanel} onEnter={this.requireAuth}/> 
     </Route> 
    </Router> 
); 
} 

Answer 2

प्रत्येक मार्ग पर एक ऑन हुक है जिसे मार्ग संक्रमण से पहले बुलाया जाता है। एक कस्टम आवश्यकता के साथ ऑनर हुक को संभालेंऑथ फ़ंक्शन।

<Route path="/search" component={Search} onEnter={requireAuth} /> 

एक नमूना आवश्यकताएँ नीचे दिखाया गया है। यदि उपयोगकर्ता प्रमाणीकृत है, तो अगले() के माध्यम से संक्रमण। अन्यथा पथनाम को अगले /) के माध्यम से/लॉगिन और संक्रमण के साथ बदलें। लॉगिन को वर्तमान पथनाम भी पारित किया गया है ताकि लॉगिन पूरा होने के बाद, उपयोगकर्ता को मूल रूप से अनुरोध किए गए पथ पर रीडायरेक्ट किया जा सके।

function requireAuth(nextState, replace, next) { 
    if (!authenticated) { 
    replace({ 
     pathname: "/login", 
     state: {nextPathname: nextState.location.pathname} 
    }); 
    } 
    next(); 
} 

Answer 3

तुम सिर्फ एक मार्ग घटक यदि का उपयोग करता है प्रमाणीकृत है की जाँच करता है कि बनाने v4 में और अगले घटकों को वापस करें और निश्चित रूप से अगला घटक अन्य मार्ग हो सकता है।

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 

import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import { Route, Redirect } from 'react-router-dom'; 

import AuthMiddleware from 'modules/middlewares/AuthMiddleware'; 

class PrivateRoute extends Component { 
    static propTypes = { 
    component: PropTypes.func.isRequired, 
    isAuthenticated: PropTypes.bool, 
    isLoggedIn: PropTypes.func.isRequired, 
    isError: PropTypes.bool.isRequired 
    }; 

    static defaultProps = { 
    isAuthenticated: false 
    }; 

    constructor(props) { 
    super(props); 
    if (!props.isAuthenticated) { 
     setTimeout(() => { 
     props.isLoggedIn(); 
     }, 5); 
    } 
    } 

    componentWillMount() { 
    if (this.props.isAuthenticated) { 
     console.log('authenticated'); 
    } else { 
     console.log('not authenticated'); 
    } 
    } 
    componentWillUnmount() {} 

    render() { 
    const { isAuthenticated, component, isError, ...rest } = this.props; 
    if (isAuthenticated !== null) { 
     return (
     <Route 
      {...rest} 
      render={props => (
      isAuthenticated ? (
       React.createElement(component, props) 
      ) : (
       <Redirect 
       to={{ 
        pathname: isError ? '/login' : '/welcome', 
        state: { from: props.location } 
       }} 
       /> 
      ) 
     )} 
     /> 
    ); 
    } return null; 
    } 

} 

const mapStateToProps = (state) => { 
    return { 
    isAuthenticated: state.auth.isAuthenticated, 
    isError: state.auth.isError 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({ 
    isLoggedIn:() => AuthMiddleware.isLoggedIn() 
    }, dispatch); 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute);