既存のangular2アプリケーションにログインページを追加

Question

私はangular2を初めて使用しています。基本的な実行アプリケーションがあり、このアプリケーション用の新しいログインページを作成する必要があります。

私はこのチュートリアルを見て、ほとんどがスタンドアロンとして、これが同じで複製することができる午前： http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

が、私は、既存のアプリケーションとの統合を見たとき、私はapp.componentで定義され、すでに別のホーム・ページを参照してください、すべきこのapp.componentの名前を新しいコンポーネントに変更し、ログインコンポーネントからそのコンポーネントにリダイレクトします。 RouterConfig =：あなたはlogingコンポーネントを作成し、この 輸出constのルートのようなルート設定でログインを定義する必要があり、この

Answer 1

周り最小限changes..best慣行でこれを統合するための最良の方法だろう何

[

{path: 'login', component: LoginComponent}, 
    {path: '', component: LoginComponent}] //default to login page 

ログインコンポーネント。

export class LoginComponent implements OnInit { 
    private jwtHelper:JwtHelper = new JwtHelper(); 
    messages:String[] = []; 
    localUser = { 
    username: '', 
    password: '' 
    } 
    constructor(private _service:LoginService, private _router:Router) { 
    } 
    login() { 
    this._service.login(this.localUser).then((data) => { 
     if (data) { 
      this._router.navigate(['/companies']); 
     } 
     }, 
     (error) => { 
     this.messages = error; 
     }); 
    } 
    clearfields() { 
    this.localUser.username = ''; 
    this.localUser.password = ''; 
    this.messages = []; 
    } 
ngOnInit():any { 
    if (window.localStorage.getItem('auth_key') === undefined) { 
     console.log("window.localStorage.getItem('auth_key'): " + window.localStorage.getItem('auth_key')); 
    } 
    else if (window.localStorage.getItem('auth_key') != null && !this.jwtHelper.isTokenExpired(window.localStorage.getItem('auth_key'))) { 
     this._router.navigate(['/companies']); 
    } 
    } 

は、ログイン後にあなたが