将登录页面添加到现有的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']); 
    } 
    } 

登录后，你可以浏览到自卑您的需要