Angular2：canActivateは私が認証されていてもログインページにリダイレクトする

Question

私はフロントエンドとしてangular2、バックエンドとしてspring/springセキュリティを持つWebアプリケーションで作業しています。

すべてが完璧に機能しますが、唯一の問題は、ログインしていてもメンバービューを更新したい場合でも、ログインページにリダイレクトされることです。

AuthGuardサービス：

import { Injectable }  from '@angular/core'; 
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import {LoginService} from './login.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 

constructor(private loginService: LoginService, private router: Router) {} 


    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { 
    let url: string = state.url; 

    return this.checkLogin(url); 
    } 
    checkLogin(url: string): boolean { 
    if (this.loginService.isAuthenticated) { return true; } 
     // Store the attempted URL for redirecting 
    this.loginService.redirectUrl = url; 
    // Navigate to the login page with extras 
    this.router.navigate(['/login']); 
    return false; 
    } 
} 

LoginService

import { Injectable } from '@angular/core'; 

import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import 'rxjs/add/operator/toPromise'; 

import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class LoginService { 

    isAuthenticated: boolean = false; 
// store the URL so we can redirect after logging in 
    redirectUrl: string; 

    constructor(private http: Http) { 

    } 

    login(username: string, password: string) { 
    const headers = new Headers(); 
    const creds = 'username=' + username + '&password=' + password; 

    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password)); 
    headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

    return new Promise((resolve) => { 
     this.http.post('http://localhost:8080/webCustomerTracker/login', creds, { headers: headers }) 
     .map(this.extractData) 
    .toPromise()//convert to promise 
     .then(//use then instead of subscribe to form promise chain 
      success => { 
        if(success) { 
       window.localStorage.setItem('auth_key', success.data); 
       this.isAuthenticated = true; 
        } 
       resolve(this.isAuthenticated); 
      }); 

    } 
    ); 
    } 
logoutAPI(): Observable<any>{ 
     return this.http.get("http://localhost:8080/webCustomerTracker/logout") 
       .map((res: Response) => res.json()) 
       .catch((error:any) => Observable.throw(error.json().error || ' Server Error ')); 
} 

    private extractData(res: Response) { 
    let body; 

    // check if empty, before call json 
    if (res.text()) { 
     body = res.json(); 
    } 

    return body || {}; 
} 
} 

Answer 1

は、この問題の解決策を見つけ、私はちょうどAuthGuardサービスにcheckLogin方法に、この小さな変更をした：

checkLogin(url: string): boolean { 

    if (!!window.localStorage.getItem('auth_key')) { return true; } 
     // Store the attempted URL for redirecting 
    this.loginService.redirectUrl = url; 
    // Navigate to the login page with extras 
    this.router.navigate(['/login']); 
    return false; 

    } 

Answer 2

ガードにあなたがAuthenticationServiceの新しいインスタンスを作成し、

this.loginService.isAuthenticated 

しているためです無効である。 BehaviourSubjectを使って値を取得できるようにするためにそれを購読してみてください。

BehaviorSubjectタイプのプロパティを持つクラスを作成します。例：

@Injectable() 
export class Globals { 
    public loggedUser: BehaviorSubject<Account> = new BehaviorSubject<Account>(null); 

この変数では、ログイン要求が成功した直後に、ログインしたユーザーの情報を保存します。その後

this.globals.loggedUser.next(--value-to-store--);// should be of type T 

、このオブジェクトから値を取得するクラスを注入し、単にこれは== nullの場合

this.globals.loggedUser.getValue() 

のようにアクセスするために、次のようになります！値を格納することは、次のように行われています。あなたがログインしている