將登錄頁面添加到現有的angular2應用程序

Question

我是angular2的新手，我們有一個基本的運行應用程序，我需要爲此應用程序編寫一個新的登錄頁面。

我看着這個教程，並幾乎是能夠複製此相同的獨立： http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

，但是當我看着與現有應用程序集成，我看到app.component定義已經不同主頁，應我將這個app.component重命名爲一個新組件，並從登錄組件重定向到它。

這將是這與解決此

Answer 1

最小changes..best實踐緊密結合，你必須創建一個登錄電子組件和路由配置這樣 出口常量路線定義登錄的最佳方式：RouterConfig = [

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

登錄後，你可以瀏覽到自卑您的需要