【发布时间】：2018-12-06 10:42:50
【问题描述】：
我是 Web 开发新手，开始学习 ReactJS。
到目前为止，构建简单的网络应用程序没有问题。
现在我想使用 Firebase 进行身份验证。
我知道如何使用 Firebase 对用户进行身份验证，但我不知道如何设计前端来限制对某些页面的访问。
以前，我使用 PHP，因为我使用了 session 变量和 include 来包含要显示给用户的 HTML 部分。
但我不知道如何在 ReactJS 中使用 Firebase。
初始和失败的方法：
我想更新this.state.loggedIn 并使用它来显示组件。但这不是正确的方法，因为我将两个组件都发送给显示，并且我们可以使用 Chrome 中的 React 开发者扩展轻松更改组件的状态。
这是我的主要 index.js 代码：
import React from 'react';
import ReactDOM from 'react-dom';
import Login from './components/Login/Login';
import Home from './components/Home/Home';
import fire from './components/Fire';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loggedIn: false,
};
this.authListener = this.authListener.bind(this);
}
componentDidMount() {
this.authListener();
}
authListener() {
fire.auth().onAuthStateChanged(user => {
if (user) {
// User is signed in.
console.log(user);
this.setState({
loggedIn: true
})
} else {
// No user is signed in.
this.setState({
loggedIn: false
});
}
});
}
render() {
return (
<div>
{this.state.loggedIn ? <Home/> : <Login/>}
</div>
);
}
}
ReactDOM.render(
<App/>, document.getElementById('app'));
在 Login.js 中，我正在调用 Firebase 身份验证函数。
只是 sn-p：
fire
.auth()
.signInWithEmailAndPassword(this.state.email, this.state.password)
.catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(error);
// ...
});
身份验证工作正常，我可以在控制台日志中看到它。
那么，我应该如何在 ReactJS + Firebase 中进行身份验证？（是否可以不使用任何其他包，如 react-routes 等？）
或者我应该为此使用云功能吗？
【问题讨论】：
-
您可以使用 react-cookies 进行视图访问限制，并在切换视图并进行条件渲染时检查凭据。不漂亮，但会工作
-
因此，出于安全目的，您希望像在 PHP 中一样将唯一需要的 HTML/JS 发送到客户端。我说的对吗？
-
@SkrewEverything 是的。如果用户已登录，我应该向用户发送与登录时不同的组件。如果用户没有登录，我根本不应该将登录组件发送给用户。
-
找到解决方案了吗？
-
@unknownymouse 没有。我还在等人来回答。
标签： javascript reactjs firebase authentication firebase-authentication