注销后

时间:2016-08-22 22:53:10

标签: javascript firebase vue.js firebase-authentication vue-router

我对使用Firebase的一些行为感到有些困惑。我从未使用旧版本,但我相信getRedirectResult是新的,因为他们与Google合作。

我有一个SPA,我正在使用Vue.js和vue-router,以及Firebase for。有一个登录页面,然后是另一个用户可以登录或不登录的视图。登录由重定向完成。加载第二个视图后,我在vue-router'激活'中检查getRedirectResult。如果有用户,请使用用户信息执行其他操作。

问题就这样进行:
 我们在第二页。用户登录。调用getRedirectResult并查找用户。耶。
 2.用户注销。我们回到了登陆页面 3.我们点击一​​个按钮,将我们引导至第二页。调用getRedirectResult并查找以前的用户。什么?!不!

我无法找到任何关于我是否遗漏某些内容并且需要进行某种额外检查的内容,或者以某种方式在注销后强行刷新页面以便忘记最后一个用户登录,或者如果这样做被认为是一个错误。非常感谢任何帮助!

在pue组件路由器的第二页上调用getRedirectResult'激活'钩:
    

    firebase.auth().getRedirectResult()
        .then((result) => {
          return result.user;
        }).then((user) => {
          // Do stuff.
        });
    

更新:通过在注销回调中执行硬页面刷新来解决此问题,如下所示:     

    firebase.auth().signOut()
        .then(() => {window.location.href = '/'});
    

2 个答案:

答案 0 :(得分:0)

使用标志来检测是否已处理userTempVal = in.nextInt(); // add this line to consume the rest of the line in.nextLine(); 。即。

getRedirectResult()

答案 1 :(得分:0)

这使我发疯。如您将在此处看到的https://github.com/firebase/firebase-js-sdk/issues/133,这是不幸的预期行为。

我的方法是避免完全使用getRedirectResult()并通过测试经过身份验证的Firebase用户的存在来实现相同的功能(而不是等待重定向回调)。在Angular中,您可以使用AngularFire的authState可观察的。使用这种方法,当您signOut()时,挥之不去的用户不会出现在您的客户端内存中,因为它没有存储在getRedirectResult()中。

概念是您在登录页面上放置一个Route Guard。如果没有经过身份验证的用户,Route Guard仅允许您进入登录页面。那时,您登录,并且一旦成功(signInWithRedirect()总是需要几秒钟),firebase用户数据就会加载到客户端中,这会触发Route Guard阻止您进入登录页面并重定向您到您选择的位置。

对于奖励积分,如果要保留returnUrl,请在触发signInWithRedirect()之前将该字符串存储在本地存储中,然后在发生重定向时在Route Guard中检索它(并将其从本地存储中删除)。

此Firebase博客文章的启发:https://firebase.googleblog.com/2018/03/cleanse-your-angular-components.html。希望可以将其概念性地应用于您在Vue.js中所做的事情。

如果您很好奇,这就是Angular 2中Route Guard的外观:

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { Router, CanActivate } from '@angular/router';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoginGuardService implements CanActivate {

  constructor(
    private auth: AuthService,
    private router: Router
  ) { }

  canActivate() {
    return this.auth.firebaseUser$.
      pipe(map(user => {
        // The firebaseuser determines if user is logged in
        // If logged in, block the route with a redirect
        if (user) {
          console.log('User detected', user);
          const returnUrl = localStorage.getItem('returnUrl');
          // Route user to returnUrl, if none, go to profile
          if (returnUrl && returnUrl !== '/') {
            this.router.navigate([returnUrl]);
          } else {
            this.router.navigate(['profile']);
          }
          return false;
        }
        return true;
      }));
  }
}