时间戳

首页 > 解决方案 > React - Firebase 使用单独的身份验证类处理身份验证持久性

javascript - React - Firebase 使用单独的身份验证类处理身份验证持久性

问题描述

我正在构建一个使用简单登录功能的反应应用程序。我只使用谷歌登录，并且正在调用该signInWithPopop函数来处理它。我创建了一个单独的类来处理所有与身份验证相关的代码。在我网站的导航栏上，如果用户未登录，我有一个登录按钮，当用户登录时，它会切换到个人资料按钮。

这就是我目前检查用户是否登录（不工作）的方式：

console.log(authHandler.getUser());
const[loginState, setLogin] = useState(authHandler.getUser()? true : false);
return(
    <div className="navbar">
      <div className="nav-options">
        <NavItem name="About"></NavItem>
        <NavItem name="Listings"></NavItem>
        <NavItem name="Dashboard"></NavItem>
        {loginState ? <NavItem name="Profile"><DropDown loginState={setLogin}></DropDown></NavItem> : <NavItem name="Login" click={() => authHandler.signIn(setLogin)}></NavItem>}
      </div>
    </div>
  );

这就是我的 authHandler 类：

import firebase from 'firebase';

export default class Auth{
    constructor(){
        var firebaseConfig = {
            ...
        };
        !firebase.apps.length? firebase.initializeApp(firebaseConfig) : firebase.app();
        firebase.analytics();
        this.provider = new firebase.auth.GoogleAuthProvider();
    }

    signIn(state){
        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION).then(() => {
            return firebase.auth().signInWithPopup(this.provider).then((result) => {
                console.log("signed in " + result.user.uid);
                this.user = result.user
                state(true);
            }).catch((error) => {
                console.log(error.message);
            });
        }).catch((error) => {
            console.log(error.message);
        })
    }

    getUser(){
        return firebase.auth().currentUser;
    }

    logout(state){
        //TODO: logout of firebase
        state(false);
    }
}

我尝试在 firebase 上添加会话和本地持久性，但是当我刷新页面时，用户已注销。在这样的单独课程中，保持持久性的正确方法是什么？我正在尝试以最佳实践来构建此应用程序，以便正确拆分代码并维护安全性。

谢谢！

标签： javascriptreactjsfirebasepersistencegoogle-signin

解决方案

每当用户的登录状态发生变化时，您都应该使用身份验证状态观察器来获取回调。首次加载页面时，始终会立即将用户视为已退出。回调将在用户的令牌从持久性加载并验证后不久被调用。使用此状态回调来确定要呈现的内容。

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

您可能希望显示加载屏幕，直到第一个回调确定用户之前是否已登录或已明确退出。

我建议阅读此内容以获取更多信息。

推荐阅读