如何检查:用户是否使用angular-6-social-login npm软件包登录?

问题描述 投票:0回答: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;
  }
}
angular angular-guards angular-social-login
1个回答
1
投票

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

例如,在Google中:userData.getAuthResponse().id_token;

此令牌可以根据您的应用程序需求存储在Cookies / localStorage / sessionStorage中,并在身份验证保护处检查此令牌是否可用。

示例:

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

AuthGuard:

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

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

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

localStorage.removeItem("APP_TOKEN")
© www.soinside.com 2019 - 2024. All rights reserved.