Javascript 刷新后如何让用户登录firebase应用程序？

我有一个内置firebase和angular的应用程序，我希望能够在刷新页面后让用户登录。现在我有一个登录屏幕，上面有两个绑定到控制器的基本输入字段

    this.email = "";
    this.pass = "";
    this.emessage = "";

    this.loginUser = function() {
        ref.authWithPassword({
            email: this.email,
            password: this.pass
        }, function(error, authData) {
            if (error) {
                console.log("Login Failed!", error);
                this.emessage = error.message;
                $scope.$apply();
            } else {
                dataStorage.uid = authData.uid;
                $location.path('/projects');
                $scope.$apply(); 
            }
        }.bind(this));
    }

---

这一切都很好，很好用，但当用户刷新页面时，他们会重新注销。当控制器加载时，是否有办法查看用户是否已登录并自动重定向？谢谢

您现在拥有的代码处理用户登录的情况。要处理用户已登录的情况，请监视身份验证状态。从：

//创建一个记录当前身份验证状态的回调
var ref=新的火基（“https://.firebaseio.com");
参考onAuth（函数（authData）{
if（authData）{
console.log（“用户”+authData.uid+”使用“+authData.provider”登录）；
}否则{
console.log（“用户已注销”）；
}
});

---

通常，您只想在该功能的

else

中显示登录按钮。

如果您使用的是Angular 4，则可以使用-Official Firebase Integration

我有一个打包AngularFire2的AuthService。我只是在服务的构造函数中检索AuthSession，并在需要时使用它。例如：

@Injectable()
export class AuthenticationService {

    private authState: any;

    constructor(public afAuth: AngularFireAuth) {
        this.afAuth.authState.subscribe((auth) => {
          this.authState = auth
        });
    }

    get user(): any {
        return this.authenticated ? this.authState : null;
    }
}

完整身份验证服务代码

---

完整角度4与Firebase示例

如评论中所述，已接受的答案不再有效。当前检查用户是否登录的方法是

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  }
});

---

（from）

我面临的挑战是，我的web应用程序具有受保护功能的公共页面。使用以下代码，用户总是先通过Firebase SDK加载，然后再进行其他操作（如果已登录）。但是如果页面需要身份验证，也会被重定向到登录页面。这在重新加载页面时效果很好

Router.beforeEach((to, from, next) => {

  // If route required authentication
  if (to.matched.some(record => record.meta.requiresAuth)) {

    // Load user
    firebase.auth().onAuthStateChanged(user => {

      // If user obj does not exist --> redirect to login page
      if (!user) {
        next({ name: 'login' });
      } else {
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });

        next();
      }
    });
  } else {

    // Path does not required auth - Still we check the user
    firebase.auth().onAuthStateChanged(user => {

      // If user exist (is logged in) --> store in state.
      if (user) {  
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });
        next();

      } else {
        next();
      }
    });
  }
})

---

其他选项会话存储

请看这里：

---

对于任何ReactJS用户，这里有一个简单的钩子，我根据这个线程中提供的答案创建了这个钩子，如果当前用户没有登录，它会将用户重定向到登录路径

import { useEffect } from 'react';
import * as firebase from 'firebase';
import { useHistory } from 'react-router-dom';

export default function useProtectedRoute() {
  const history = useHistory();

  useEffect(() => {
    firebase.auth().onAuthStateChanged(function(user) {
      if (!user) {
        console.error(
          'Access to protected route denied, redirecting to login...'
        );
        history.push('/auth/login');
      }
    });
  }, [history]);
}

您只需导入此钩子并在任何不希望呈现的组件内运行，除非用户登录

示例：

import React from 'react';
import useProtectedRoute from 'hooks/useProtectedRoute';

export default function UserDetailsComponent() {
  useProtectedRoute();
  return <div>This is only visible when user is logged in</div>;
}

从“React”导入React；
从“挂钩/useProtectedRoute”导入useProtectedRoute；
导出默认函数UserDetailsComponent（）{
useProtectedRoute（）；
return只有在用户登录时才可见；
}

在会话或LocalStora中保存访问令牌？如何做到这一点。如果这个问题太宽泛，我很抱歉。不客气。直到最近，我才注意到这一点，并在试图隐藏我的登录按钮时遇到了各种各样的问题，因此，感谢有机会在你知道怎么做后，告诉你这是多么微不足道。看起来，

onAuth

已经被弃用了。请参阅@FrankvanPuffelen我正在使用的

onAuthStateChanged

，当我刷新时，我的应用程序会显示“注销状态”，如登录按钮等，然后再显示正确的内容。我应该在本地存储东西、cookies或其他东西来让这个过程看起来更顺畅吗？存储本地（最好是同步）值是我所知道的使这个过程更快的唯一方法。请记住，您的本地“他们已登录”值可能错误，并确保在这种情况下将其发送回登录屏幕，。我以为这是iOS页面，对不起！：）：）嘿，如果你能提供更多关于代码本身的信息，比如你为哪个文件写代码等等，那会很有帮助。

import React from 'react';
import useProtectedRoute from 'hooks/useProtectedRoute';

export default function UserDetailsComponent() {
  useProtectedRoute();
  return <div>This is only visible when user is logged in</div>;
}