带有HTTP请求和Observable的Angular2身份验证防护

提姆

我目前正在使用spring boot作为后端实现angular2示例应用程序。我在前端身份验证保护机制和可观察变量方面遇到了一些问题。

我正在努力实现:

  1. 当有人输入受保护的路由时,auth防护人员应检查auth服务变量中是否已经设置了用户
  2. 如果未设置,则应发出http请求以检查会话是否可用
  3. 服务方法应该返回一个true / false值(由于可能存在http请求,因此它是异步的)
  4. 如果服务返回false,则auth防护应重定向到登录页面
  5. auth Guard应该返回true / false,这样路由就可以被激活或不被激活

我的代码当前看起来像这样(我正在使用RC5 btw。):

验证卫士

import {Injectable} from "@angular/core";
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router";
import {Observable, Subject} from "rxjs/Rx";
import {AuthService} from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    var authenticated = this.authService.isAuthenticated();
    var subject = new Subject<boolean>();
    authenticated.subscribe(
        (res) => {
          console.log("onNext guard: "+res);
          if(!res && state.url !== '/signin') {
            console.log("redirecting to signin")
            this.router.navigate(['/signin']);
          }
          subject.next(res);
        });
    return subject.asObservable();
  }
}

验证服务

import {Injectable} from "@angular/core";
import {User} from "./user.interface";
import {Router} from "@angular/router";
import {Http, Response, Headers} from "@angular/http";
import {environment} from "../environments/environment";
import {Observable, Observer, Subject} from "rxjs/Rx";

@Injectable()
export class AuthService {
  private authenticatedUser : User;
  constructor(private router: Router, private http: Http) {}

  signupUser(user: User) {
  }


  logout() {
    //do logout stuff
    this.router.navigate(['/signin']);
  }

  isAuthenticated() : Observable<boolean> {
    var subject = new Subject<boolean>();
    if (this.authenticatedUser) {
      subject.next(true);
    } else {
      this.http.get(environment.baseUrl + '/user')
        .map((res : Response) => res.json())
        .subscribe(res => {
          console.log("next: returning true");
          this.authenticatedUser = User.ofJson(res);
          subject.next(true);
        }, (res) => {
          console.log("next: returning false");
          subject.next(false);
        });
    }
    return subject.asObservable();
  }
}

问题是:即使我登录后,警卫队也永远不会允许路由器组件激活。

谢谢您的帮助!

贡特·佐赫鲍尔(GünterZöchbauer)

改变

return subject.asObservable();

return subject.asObservable().first();

路由器等待可观察对象完成。first()使它在第一个事件后完成。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

带有身份验证的HTTP HTTP获取请求

来自分类Dev

带有子路由的Angular 2身份验证

来自分类Dev

CORS预检请求返回带有Windows身份验证的HTTP 401

来自分类Dev

如何从Android中的WebView发出带有身份验证信息的HTTP请求?

来自分类Dev

Angular2:对节点服务器的 PUT 请求不起作用 - 身份验证丢失

来自分类Dev

带有身份验证令牌的httr POST请求

来自分类Dev

带有身份验证的GET请求

来自分类Dev

如何将带有 HTTP 基本身份验证的 curl 请求转换为 Spring RestTemplate 请求?

来自分类Dev

带有HTTP身份验证的Wordpress XML媒体导入

来自分类Dev

使用Angular2的NTLM身份验证

来自分类Dev

Angular2 + Web API +基于令牌的身份验证

来自分类Dev

基本身份验证 Angular2(非 CORS)

来自分类Dev

带有CouchDB Cookie身份验证的Angular 401

来自分类Dev

在使HTTP请求和简单身份验证迅速时遇到问题

来自分类Dev

Angular2通过基本身份验证访问REST引发“对预检的响应具有无效的HTTP状态代码401”

来自分类Dev

后续请求的基本HTTP身份验证

来自分类Dev

带有RXJS Observable TypeError的Angular2 Http:this.http.get(...)。map(...)。catch不是函数

来自分类Dev

带有RXJS Observable TypeError的Angular2 Http:this.http.get(...)。map(...)。catch不是函数

来自分类Dev

具有基本身份验证的 HTTP 请求返回 401 - Angular 4 上的标头问题

来自分类Dev

有没有人为IdentityServer 3/4创建任何Angular2身份验证包装类?

来自分类Dev

带有Django身份验证的SAML

来自分类Dev

带有指纹的Android身份验证

来自分类Dev

带有 Observable 的 Angular 2 Http 请求。如何使用 .subscribe 处理数据

来自分类Dev

Angular, rxjs: HTTP Observable 取决于经过身份验证的用户

来自分类Dev

带有模块请求的node.js中的代理身份验证

来自分类Dev

带有身份验证的PUT的节点JS请求承诺

来自分类Dev

播放2.2.x,带有身份验证和请求扩展的操作组合

来自分类Dev

带有身份验证标头的Java Jersey HTTPS GET请求

来自分类Dev

带有身份验证和数据的iOS Swift发自表单请求

Related 相关文章

  1. 1

    带有身份验证的HTTP HTTP获取请求

  2. 2

    带有子路由的Angular 2身份验证

  3. 3

    CORS预检请求返回带有Windows身份验证的HTTP 401

  4. 4

    如何从Android中的WebView发出带有身份验证信息的HTTP请求?

  5. 5

    Angular2:对节点服务器的 PUT 请求不起作用 - 身份验证丢失

  6. 6

    带有身份验证令牌的httr POST请求

  7. 7

    带有身份验证的GET请求

  8. 8

    如何将带有 HTTP 基本身份验证的 curl 请求转换为 Spring RestTemplate 请求?

  9. 9

    带有HTTP身份验证的Wordpress XML媒体导入

  10. 10

    使用Angular2的NTLM身份验证

  11. 11

    Angular2 + Web API +基于令牌的身份验证

  12. 12

    基本身份验证 Angular2(非 CORS)

  13. 13

    带有CouchDB Cookie身份验证的Angular 401

  14. 14

    在使HTTP请求和简单身份验证迅速时遇到问题

  15. 15

    Angular2通过基本身份验证访问REST引发“对预检的响应具有无效的HTTP状态代码401”

  16. 16

    后续请求的基本HTTP身份验证

  17. 17

    带有RXJS Observable TypeError的Angular2 Http:this.http.get(...)。map(...)。catch不是函数

  18. 18

    带有RXJS Observable TypeError的Angular2 Http:this.http.get(...)。map(...)。catch不是函数

  19. 19

    具有基本身份验证的 HTTP 请求返回 401 - Angular 4 上的标头问题

  20. 20

    有没有人为IdentityServer 3/4创建任何Angular2身份验证包装类?

  21. 21

    带有Django身份验证的SAML

  22. 22

    带有指纹的Android身份验证

  23. 23

    带有 Observable 的 Angular 2 Http 请求。如何使用 .subscribe 处理数据

  24. 24

    Angular, rxjs: HTTP Observable 取决于经过身份验证的用户

  25. 25

    带有模块请求的node.js中的代理身份验证

  26. 26

    带有身份验证的PUT的节点JS请求承诺

  27. 27

    播放2.2.x,带有身份验证和请求扩展的操作组合

  28. 28

    带有身份验证标头的Java Jersey HTTPS GET请求

  29. 29

    带有身份验证和数据的iOS Swift发自表单请求

热门标签

归档