java - 将登录页面添加到现有的 angular2 应用程序

Question

我是 angular2 的新手，我们有一个基本的正在运行的应用程序，我需要为此应用程序编写一个新的登录页面。

我看了这个教程，几乎能够将其复制为独立的: http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

但是当我希望与现有应用程序集成时，我看到 app.component 中已经定义了不同的主页，我是否应该将此 app.component 重命名为新组件并从登录组件重定向到它。

将其集成到最少的更改的最佳方法是什么......围绕此的最佳实践

Answer 1

您必须创建一个日志组件并在路由配置中定义登录，如下所示导出常量路由: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']);
    }
  }

登录后您可以根据需要导航到任何页面