我已成功与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;
}
}
成功登录后,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")