Question

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

我查看了本教程，并且几乎可以像独立一样复制它： http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/

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

将这种方法与最小变化相结合的最佳方式是什么？最好的做法是围绕这个

Answer 1

您必须创建一个登录组件并在路由配置中定义登录，如下所示 export const routes：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']);
    }
  }

登录后，您可以导航到任何基于您需要的页面

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

1 个答案: