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

Question

我已经成功地与angular-6-social-login(https://www.npmjs.com/package/angular-6-social-login(集成，使用谷歌帐户登录到我的角度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;
}
}

Answer 1

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

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

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

例：

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 令牌身份验证的更多详细信息。对于Facebook FB Access令牌

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

localStorage.removeItem("APP_TOKEN")