如果用户登录或未登录，实现条件导航栏的策略

Question

Background : I am creating a very basic application with 4 different capabilities: Signup, Login, Searching, and Creating content. As of right now, I can log in to users and prevent unauthorized users from going to protected routes. This is shown below in my Protected.js component. However, I am struggling to figure out a way to also conditionally display a login/logout button in my navigation bar located in my App.js .

Followup Questions : Should I move the authentication logic out of my Login.js route and into my main App.js component and pass the state down? Wouldn't that be very inefficient, because every time I am rendering a new view, the App.js is performing another fetch with my backend API to verify if the user has a non-expired session? This might appear trivial to some, but I am having a difficult time wrapping my head around how to conditionally show a login/logout button efficiently. I have looked into Context API, so I would be open to some advice down that route if you feel necessary, but I am not familiar with Redux( I just began to React a week ago ). I am looking for well-thought-out strategies, so I would greatly appreciate it if you could do your best to provide complete and coherent responses. I really appreciate it.

App.js

class App extends Component {
    render() {
        return(
            <Router>
                <div>
                    <Navbar bg="light" variant="light">
                        <Navbar.Brand href="#home">My Application</Navbar.Brand>
                        <Nav className="mr-auto">
                            <Link to="/signup" className="nav-link">Signup</Link>
                            <Link to="/login" className="nav-link">Login</Link>
                            <Link to="/feed" className="nav-link">Search</Link>
                            <Link to="/create-post" className="nav-link">Create</Link>
                        </Nav>
                        <Form inline>
                            <Button variant="outline-primary">Logout</Button>
                        </Form>
                    </Navbar>
                </div>
                <Switch>
                    <Route path = '/signup' component = {Signup} />
                    <Route path = '/login' component = {Login} />
                    <Route path = '/feed' component = {Feed} />
                    <ProtectedRoute path = '/create-post' component = {CreatePost} />
                </Switch>

            </Router>
        )
    }
}

Login.js

 class Login extends Component {
    constructor(props) {
        super(props)

        this.state = {
            username: "",
            password: ""
        }

        this.handleChange = this.handleChange.bind(this)
        this.handleSubmitForm = this.handleSubmitForm.bind(this)
    }

    handleChange(event) {
        //console.log(event.target.name)
        this.setState({[event.target.name]: event.target.value})
    }

    handleSubmitForm() {
        const user = {
            username: this.state.username,
            password: this.state.password
        }

        const url = 'http://localhost:9000/api/login'

        fetch(url, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
        .then((response) => response.json())
        .then((data) => {
            if (data.status === 1) {
                this.props.history.push('/feed')
            }
            console.log(data)
        })
        .catch((error) => {
            console.log('Error', error)
        })
    }

    render() {
        return (
        <div>
            <Card className="card-login" style={{ width: '18rem' }}>
                <Card.Body>
                <Card.Title>Login</Card.Title>
                    <Form>
                        <Form.Group>
                            <Form.Control placeholder ="Username"
                                          name = "username"
                                          value = {this.state.username}
                                          onChange = {this.handleChange}/>
                        </Form.Group>
                        <Form.Group>
                            <Form.Control type ="password"
                                          placeholder="Password"
                                          name = "password"
                                          value = {this.state.password}
                                          onChange = {this.handleChange} />
                        </Form.Group>                   
                    <Button variant ="primary"
                            value="Submit"
                            onClick={this.handleSubmitForm}>Submit
                    </Button>
                    </Form>
                </Card.Body>
            </Card>         
        </div>)
    }
}

Protectedroute.js

class ProtectedRoute extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAuthenticated: false,
            isLoading: true
        }
        this.isAuthenticated = this.isAuthenticated.bind(this)
    }

    componentDidMount() {
        this.isAuthenticated()
    }

    isAuthenticated() {
        const url = 'http://localhost:9000/api/auth'
        fetch(url, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type' : 'application/json'
            }
        })
        .then((response) => response.text())
        .then((data) => {
            if (data === 'true') {
                this.setState({
                    isAuthenticated: true,
                    isLoading: false
                })
            } else {
                this.setState({
                    isAuthenticated: false,
                    isLoading: false
                })
            }
        })
        .catch((err) => {
            console.log('Error', err)
        })
    }
    render() {
        const Component = this.props.component
        if (this.state.isLoading === true) {
            return (<div>Loading</div>)
        }
        return(
            <Route render={(props) => this.state.isAuthenticated && !this.state.isLoading ? (<Component {...this.props}/>) : (<Redirect to ='/login' />)} />
        )
            
    }
}

api.js (Express Backend)

router.post('/login', function(req,res,next) {
    const query1 = "SELECT * FROM users WHERE username = TRIM(?) AND pass = TRIM(?)"
    database.query(query1, [req.body.username, req.body.password])
    .then((result) => {
        if (result.length) {
            if (req.session.username) {
                res.json({'message': 'You are already logged in', 'status': 0})
            } else {
                req.session.username = req.body.username
                res.json({'message': 'You have successfully logged in', 'status': 1})
            }
        } else {
            if (req.session.username) {
                res.json({'message': 'You are already logged in', 'status': 0})
            } else {
                res.json({'message': 'Incorrect Credentials', 'status': 0})
            }
        }
    }).catch((err) => res.send(err))
})



router.get('/auth', (req, res, next) => {
    if (req.session.username) {
        res.send(true)
    } else {
        res.send(false)
    }
})

Answer 1

Well there is clear need for the global state and you can use React Context, Redux or even set auth state in App component, pass methods, which change state ie. setAuth , as props to Login component.

class App extends Component {
  constructor(props) {
    super(props);
    this.setAuth = this.setAuth.bind(this);
    this.state = {
      isAuthenticated: false
    };
  }

  setAuth(value) {
    this.setState({
      isAuthenticated: value
    });
  }

<Route path='/login' component={() => <Login setAuth={this.setAuth} />} />

Should I move the authentication logic out of my Login.js route and into my main App.js component and pass the state down? Wouldn't that be very inefficient, because every time I am rendering a new view, the App.js is performing another fetch with my backend api to verify if the user has a non-expired session?

Did you mean the logic which happens in Protectedroute component? I would extract that to App component as you said because in a scenario

<ProtectedRoute path = '/create-post' component = {CreatePost} />
<ProtectedRoute path = '/post-list' component = {PostList} />
<ProtectedRoute path = '/update-post' component = {UpdatePost} />

It would check if user is authenticated multiple times when you want to get to '/update-post' section.