平均 - NodeJSルートをオーバーライドした角度のルート

Question

私はPassportJS経由でクライアントサイド角度アプリケーションへのアクセスを制限しようとしています。

基本的に私は、ログインするために認証プロバイダにリダイレクトするために、そのアプリケーションにアクセスしようとしている誰かをルーティングしようとしています。しかし、角度のあるルートがNodeJS Expressルートを上回るように見えます。

私が '/'に行くと、角型アプリケーションを読み込んでリダイレクトしません。これは、角度ルートと同じルートを使用するすべてのルートで同じケースです。

server.jsはスニペット：

次のコードは、Facebookのにログインするために皆をリダイレクトする必要があります。代わりに角インデックスページを読み込むだけです。

function checkAuthentication(req,res,next){ 
    if(req.isAuthenticated()){ 
     //if user is looged in, req.isAuthenticated() will return true 
     console.log("/ " + true); 
     res.sendFile(path.join(__dirname, 'dist/index.html')); 
    } else{ 
     console.log("/ " + false); 
     res.redirect("/api/passport/login/facebook"); 
    } 
} 

app.get('/*', checkAuthentication ,(req, res) => { 
}); 

角度のindex.htmlスニペット：

エクスプレスルータに表示されているようにindex.htmlページは、同じ経路を使用します。

<base href="/"> 

のは、私はそうのように「/アプリ/」を使用するようにindex.htmlをベースHREFを変更しましょう：

<base href="/app/"> 

と「/アプリ/のユーザーでログインしてリダイレクトするように明示して、ルーティング設定直接/アプリ ''：：

angular.route例

app.use("/app", express.static(path.join(__dirname, 'dist'))); 

function checkAuthentication(req,res,next){ 
    if(req.isAuthenticated()){ 
     //if user is looged in, req.isAuthenticated() will return true 
     console.log("/app" + true); 
     res.sendFile(path.join(__dirname, '../../dist/index.html')); 
    } else{ 
     console.log("/app" + false); 
     res.redirect("/api/passport/login/facebook"); 
    } 
} 

router.get('/app', checkAuthentication, (req, res) => { 
    console.log("approuter hit"); 
}); 

module.exports = router; 

とに行くのでLIKE'。それでも角度index.htmlページが読み込まれ、ログインするようにリダイレクトされません。しかし、 '/'に行くと、ログインするようにリダイレクトされます。

NodeJSエクスプレスの角度オーバーライディングを停止するにはどうしたらいいですか？ルート？

UPDATE：

app.route.jsはスニペット：

import { Routes } from '@angular/router'; 
import { HomeComponent } from './home'; 

export const ROUTES: Routes = [ 
    { path: '',  component: HomeComponent }, 
]; 

Answer 1

あなたがAuthGuardとクライアントとの間コミュニケータとして機能するクライアント側の認証サービス（すなわち角度）を実装する必要がありますサーバ。また、isAuthenticatedのような変数を使用してログイン状態を追跡します。

AuthGuard：

import { Injectable }  from '@angular/core'; 
import { CanActivate, CanActivateChild, Router } from '@angular/router'; 

import { AuthenticationService } from './auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate, CanActivateChild { 

    constructor(private authService: AuthenticationService, private router: Router) {} 
    canActivate() : boolean { 
     console.log('AuthGuard#canActivate called ' + this.authService.isAuthenticated); 
     return this.checkLoggedIn("random"); 
    } 

    canActivateChild() : boolean { 
     return this.canActivate(); 
    } 

    checkLoggedIn(url: string): boolean { 
     if (this.authService.isLoggedIn()) { 
      return true; 
     } 
     this.authService.redirectUrl = url; 
     this.router.navigate(['/login']); 
     return false; 
    } 

} 

がAuthenticationService：

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import { Observable } from 'rxjs/Rx'; 
import { NgForm } from "@angular/forms"; 

import { AuthenticationApi } from "../../modules/authentication/authentication-api"; 
import { IUser } from "app/modules/authentication/user"; 
var headers = new Headers({ 'Content-Type': 'application/json' }); 
var options = new RequestOptions({ headers: headers }); 

@Injectable() 
export class AuthenticationService implements AuthenticationApi { 
    currentUser: IUser; 
    redirectUrl: string; 
    changePassoword:() => Observable<any>; 
    forgotPassowrd:() => Observable<any>; 

    isAuthenticated = false; 
    constructor(private router: Router, private http: Http) { 
    this.currentUser = null 
    } 

    isLoggedIn(): boolean { 
    return !!this.currentUser; 
    } 

    logIn(logInUser:any): Observable<any> { 
    console.log('UserService.signIn: ' + logInUser.userName + ' ' + logInUser.password + ' ' + logInUser.rememberMe); 
    this.isAuthenticated = true; 
    this.currentUser = { 
     userName: logInUser.userName 
    } 
    return this.http.post('http://localhost:3000/auth/login', 
     JSON.stringify(logInUser), 
     options 
    ) 
    .map((resp: Response) => resp.json()) 
    .catch(this.handleError); 
    //return Observable.of({}).delay(2000); 
    // return Observable.of({}).delay(2000).flatMap(x=>Observable.throw('Invalid User Name and/or Password')); 
    } 

    register(registerUser:any): Observable<any> { 
    this.isAuthenticated = true; 
    console.log(registerUser); 
    return this.http.post('http://localhost:3000/auth/register', 
     JSON.stringify(registerUser), 
     options 
    ) 
    .map((resp: Response) => resp.json()) 
    .catch(this.handleError); 
     //this.router.navigate(['/signin']); 
     //return Observable.of({}).delay(2000); 
    } 

    connectWithFacebook() :Observable<any> { 
    this.isAuthenticated = true; 
    //return Observable.of({}).delay(2000); 
    return this.http.get('http://localhost:3000/auth/facebook') 
    .map((resp: Response) => resp.json()) 
    .catch(this.handleError); 
    } 

    connectWithGoogle() :Observable<any> { 
    this.isAuthenticated = true; 
    //return Observable.of({}).delay(2000); 
    return this.http.get('http://localhost:3000/auth/google') 
    .map((resp: Response) => resp.json()) 
    .catch(this.handleError); 
    } 

    handleError(error: any) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
    } 

    logOut(): Observable<any>{ 
    this.isAuthenticated = false; 
    this.currentUser = null; 
    this.router.navigate(['/login']); 
    return Observable.of({}) 
    } 

} 

AuthenticationApi：

import { Observable } from 'rxjs'; 

export abstract class AuthenticationApi { 
    logIn : (loginUser:any) => Observable<any>; 
    logOut :() => Observable<any>; 
    register : (registerUser:any) => Observable<any>; 
    connectWithFacebook :() => Observable<any>; 
    connectWithGoogle :() => Observable<any>; 
    changePassoword :() => Observable<any>; 
    forgotPassowrd :() => Observable<any>; 
}