기존 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']); 
    } 
    } 

는 로그인 후