1

我已成功与 angular-6-social-login ( https://www.npmjs.com/package/angular-6-social-login ) 集成以使用 google 帐户登录我的 angular APP。

我正在创建一个 Angular Guard 来保护路由，以便只有用户在登录后才能访问。来自 angular-6-social-login 的 AuthService 不支持任何直接功能来查看用户是否已登录。请问这里有什么建议吗？

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from 'angular-6-social-login';

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

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

  canActivate(nextRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const requiresLogin = nextRoute.data.requiresLogin || false;
    console.log("AccessGuard canActivate is being called")

      // Check that the user is logged in...
      //TODO: need help with the if condition
      if (!<userLoggedin>) { 
      this.router.navigate(['login'])  
      return false;
    }

    return true;
  }
}
4

1 回答 1

3

当您成功登录后，Facebook/Google 将为特定用户提供唯一的访问令牌。

例如在谷歌： userData.getAuthResponse().id_token;

此令牌可以根据您的应用程序需要存储在 Cookies/localStorage/sessionStorage 中，并检查此令牌是否在 auth 守卫处可用。

例子：

localStorage.setItem("APP_TOKEN", userData.getAuthResponse().id_token);

身份验证：

canActivate(): Observable<boolean> {
  if (!localStorage.getItem("APP_TOKEN")) {
    this.router.navigate(['login'])  
    return false;
  }
  return true;
}

此令牌也可以与您的后端服务器一起使用以验证当前用户。有关此链接ID Token Auth的更多详细信息。对于 Facebook FB 访问令牌

确保清除此令牌并调用 api 以在注销时使此令牌无效。

localStorage.removeItem("APP_TOKEN")
于 2019-12-17T03:33:52.023 回答