मैं अपने प्रतिक्रिया ऐप पर लगातार लॉगिन डिज़ाइन लागू कर रहा हूं।

मेरा ऐप स्थानीय स्टोरेज में पिछले लॉगिन से टोकन स्टोर करेगा। ऐप स्टार्टअप पर मुझे इस टोकन को डीकोड/सत्यापित करने और अपना लॉगिन जारी रखने की आवश्यकता है। यदि कोई उपयोगकर्ता लॉग इन है तो उन्हें होम पेज दिखाई देता है, अन्यथा उन्हें लैंडिंग पेज दिखाई देता है। मुद्दा यह है कि मेरा ऐप शुरू में "लॉग इन नहीं" स्थिति में "लॉग इन स्टेट" में होने से झिलमिलाहट करेगा, जिसका अर्थ है कि ऐप शुरू में कुछ मिलीसेकंड के लिए लैंडिंग पृष्ठ में है और फिर यह होम पेज में है। यह झिलमिलाहट थोड़ा परेशान करने वाला है और निश्चित रूप से एक अच्छा ux नहीं है।

क्या मेरे पास प्रारंभिक लोडिंग स्क्रीन होनी चाहिए या इस सशर्त दृश्य परिदृश्य को संभालने का कोई बेहतर तरीका है।

constructor(props){
    super(props);

    this.state = {
        isAuthenticated: false,
        username: null
    };

    this.dispatch = this.dispatch.bind(this);
};

componentDidMount(){
    const token = localStorage.token;
    if (token){
        axios.get('api/users/getUser', {headers: {
            "Authorization": token
        }})
        .then(res => {
            this.dispatch(this.state, {
                type: 'LOGIN', payload: res.data
            })
        })
    }
}

render(){
    return (
        <AuthContext.Provider
            value = {{
                'state': this.state,
                'dispatch': this.dispatch
            }}
        >
            <div className='App'>
                {!this.state.isAuthenticated ? <LandingPage /> : <Home />}
            </div>
        </AuthContext.Provider>
    )
};
0
Edgar Arakelyan 27 अक्टूबर 2019, 03:40

1 उत्तर

सबसे बढ़िया उत्तर

आप एक स्पिनर को लागू कर सकते हैं जो दर्शाता है कि टोकन लाने से पहले एक घटक स्थिति जोड़कर ग्राहक अधिकृत हो रहा है।

constructor(props){
    super(props);

    this.state = {
        isAuthenticated: false,
        isAuthenticating: false,
        username: null,

    };

    this.dispatch = this.dispatch.bind(this);
};

componentDidMount(){
    const token = localStorage.token;
    if (token){
        this.setState({ isAuthenticating: true })
        axios.get('api/users/getUser', {headers: {
            "Authorization": token
        }})
        .then(res => {
            this.dispatch(this.state, {
                type: 'LOGIN', payload: res.data
            })
            this.setState({ isAuthenticating: false })
        })
    }
}

render(){
    return (
        <AuthContext.Provider
            value = {{
                'state': this.state,
                'dispatch': this.dispatch
            }}
        >
            <div className='App'>
                {this.state.isAuthenticating ? <Spinner /> : null }
                {!this.state.isAuthenticated ? <LandingPage /> : <Home />}
            </div>
        </AuthContext.Provider>
    )
};
1
Joelgullander 27 अक्टूबर 2019, 00:46