关于在React.js中正确处理身份验证和登录登录有以下问题：
在我的React.js应用程序中，登录是通过登录表单来处理的，用户可以在其中输入其凭据。然后使用Firebase的this.authListener（）验证凭据。如果用户有效，则状态下的用户属性设置为{user}。在这种情况下，路由器将呈现“本地”组件，否则仍将呈现“登录”组件。我的问题是呈现时（或刷新浏览器时，因此重新呈现DOM），出现Home组件，然后再次呈现Login。我该如何解决这个问题，以便除非授权或验证用户，否则不会显示Home组件？
import React, { Component } from 'react';
import fire from '../src/Firebase/Fire';
import Home from '../src/Home/Home';
import Login from '../src/Login/Login';
import {BrowserRouter } from 'react-router-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = ({
user: {},
});
this.authListener = this.authListener.bind(this);
}
componentDidMount() {
this.authListener();
}
authListener() {
fire.auth().onAuthStateChanged((user) => {
if (user) {
this.setState({ user });
} else {
this.setState({ user: null });
}
});
}
render() {
var divStyleHome = {
backgroundImage: 'url(' + '../src/images/background-home.jpg' + ')'
}
return (<BrowserRouter>
<div>
{this.state.user ? <Home /> : <Login />}
{console.log(this.state.user)}
</div>
</BrowserRouter>);
};
}
export default App;