handling multiple protected routes

Question

I'm trying to protect two different routes that to access that routes user must need to be authenticated I also followed this question but it doesn't help me at all. In my Header.js all the logic has been given on that file to check whether the user is logged in or not ( using redux action, reducer ) So I'm directly giving <Redirect to='/surveys'/> this redirect link will be accessed when the user logged in kind of like welcome page. And there is another route /surveys/new whenever going in this route if in some condition browser gets refreshed I'm thrown again to the /surveys link I want to stay that page whenever the user reload the browser. Plz check the renderLocation() function...I'm totally fed up trying to find the solution plz help me somebody

here is my Header.js file

import React, { Component } from 'react';
import { connect } from "react-redux";
import { Link, Redirect} from 'react-router-dom';
import Payments from "./Payments";

class Header extends Component {
    // renderLocation(){
    //     if(window.location.reload(window.location.pathname === '/surveys')){
    //         return <Redirect key='6' to='/surveys' />;
    //     }else if(window.location.reload(window.location.pathname === '/surveys/new')){
    //         return <Redirect key='7' to='/surveys' />;
    //     }else{
    //         return <Redirect key='8' to='/surveys' />;
    //     }

    // }
    renderContent(){
        switch(this.props.auth){
            case null:
                return;
            case false:
                return [
                    <li key="4"><a href="/auth/google" className="btn"><strong>Login With Google</strong></a></li>,
                    <Redirect key="5" to="/" />
                ];
            default:
                return [
                        <li key="1"><Payments /></li>,
                        <li key="2"><button className = "btn ml-3"><strong>CREDITS : {this.props.auth.credits}</strong></button></li>,
                        <li key="3"><a href="/api/logout" className="btn"><strong>Logout</strong></a></li>,
                        // <div>{() => this.renderLocation()}</div>,
                        <Redirect key="8" to='/surveys' />,
                ]
        }   
    }

    render() {
        return (
            <nav style={{marginBottom:"20px"}}>
                <div className="nav-wrapper">
                    <div className="container">
                        <Link to={this.props.auth ? '/surveys' : '/'} 
                            className="left brand-logo" style={{textDecoration : "none", fontFamily: "'Pacifico', cursive"}}> Emaily
                        </Link>
                        <ul id="nav-mobile" className="right">
                            {this.renderContent()} 
                        </ul>

                    </div>
                </div>
            </nav>
        )
    }
}

const mapStateToProps = (state) => {
    return { auth : state.auth}
}

export default connect(mapStateToProps)(Header);

score 1 · Answer 1 · answered Oct 05 '19 at 17:41

1

Use a Higher Order Component

export const withAuth = (Component) => {
    return () => {
        // Check if Authenticated
        const user = checkUserSession() // Handle return user context if authenticated or null if not

        // If Logged in, it will render the Component.
        if (user) {
            return <Component user={user} />;
        } else {
            return <LoginComponent />
        }
    };
};

Now with for which ever routes you need auth, just export those respective components like

import withAuth from './withAuth.jsx'

class MyProtectedComponent extends React.Component {
     // ...
}

export default withAuth(MyProtectedComponent)

On Login, just re render the component.

answered Oct 05 '19 at 17:41

Rohith Balaji

714
4
16

Can you describe me about the first part withAuth functional component how i get the authentication details it in header class component plz describe me about my protected component – Developer Nans Oct 08 '19 at 04:44
That depends on how you've implemented auth. If it's simple JWT based, retrieve the token, check if session is still valid and if invalid render the login component. – Rohith Balaji Oct 08 '19 at 05:01

handling multiple protected routes

here is my Header.js file

1 Answers1