Добавить страницу входа в существующее приложение angular2

Question

Я новичок в angular2, и у нас есть базовое запущенное приложение, и мне нужно написать новую страницу входа для этого приложения.

Я смотрел на этот учебник и довольно много могу повторить это же, как и автономные: http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

, но когда я посмотрел на интеграцию с существующим приложением, я вижу, уже другую домашнюю страницу, определенную в app.component, должны Я переименую этот app.component в новый компонент и перенаправляю его на компонент входа.

, что было бы лучшим способом интегрировать это с минимальными практиками changes..best вокруг этого

Answer 1

вы должны создать компонент Loging и определить логин в конфигурации маршрутов, как это экспорта константных маршруты: 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']); 
    } 
    } 

после входа в систему вы можете перейти на любую страницу унижен на вашей потребности