Angular 如何为现有网站添加默认登录页面

我已经准备好angular 6的模板，我需要添加默认的消费者登录页面

尝试在路由器中创建使用者组件和给定路径

{
  path: '',
  redirectTo: 'consumer',
  pathMatch: 'full',
}, {
  path: 'admin-layout',
  component: AdminLayoutComponent,
  canDeactivate: [AuthGuard]
  children: [{
    path: '',
    loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'
  }]
}

---

我希望在运行Ng serve时，默认页面必须是消费者登录页面

您可以将消费者登录页面设置为默认主页，如下所示

...
{ path: '', redirectTo: '/consumer_login', pathMatch: 'full'},
{ path: 'consumer_login',   component: ConsumerLoginComponent},
...

---

添加新的默认登录页面非常简单，为此，我通常执行以下步骤：

1） 创建登录页面组件（我称为LoginPage）

2） 路由文件：添加以下内容：

const appRoutes: Routes = [
  { path: '', component: LoginPage, pathMatch: 'full' },
  { path: 'login', component: LoginPage },
  { path: 'admin', component: AdminPage, canActivate: [AuthenticationGuard] }
];

这意味着根路径（第一条指令）和“/login”将重定向到LoginPage，在第三个路由选项中，我们看到当我们尝试访问/admin页面时，它将检查组件是否可以激活

重要信息：所有不需要身份验证即可访问的路由（登录、联系、AboutUs等）都不使用属性“canActivate”

3） AuthenticationGuard：这是检查您是否经过身份验证的地方（布尔返回）

5） 登录页面：我使用了标准的HTML登录页面（用户名、密码、登录、取消）。LoginButton click调用订阅AuthenticationService.authenticate（）的LoginPage的authenticate方法，完成后返回成功或消息

  public authenticate(): void {
    this.spinner.show();
    this.authService.authenticate(this.userName, this.pwd).add(response => {
        if (response.success){
            this.router.navigate([ROUTE_NAME, EVENTUAL_PARAMETER]); // route name would be admin, for example
        } else {
            // display a message, log or do something with the result
        }
  }

那是我通常做的事。希望能有帮助。

---

Cheers

实际上，该模板有两个routing.ts，即（app.routing.ts和admin layout.routing.ts），其中我需要包括此路径\必须位于主模块的路由中，即app.routing.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { OperationResult } from '../model/operation-result.model';
import { RouterService, Page } from '../service-tools/router.service';
import { Subscription } from 'rxjs';

@Injectable()
export class AuthenticationService {
  private user: UserSimplified; // just an example to show that we can use a model to do that

  constructor(private router: RouterService) { }

  public authenticate(userName: string, password: string): Subscription {

    // do the API call
    // store the result or return a subscription to do it

  }

  public get currentUser(): UserSimplified {    
    if (!this.user){
      // here you can get the user from local storage for example (save it during the api call)
      // this.user = JSON.parse(this.getString('currentUser')) as UserSimplified;
    }
    return this.user;
  }

  public get isAuthenticated(): boolean {
    return (this.currentUser != null);
  }

  public logout(): void {
    // clear the localStorage user data
  }
}

  public authenticate(): void {
    this.spinner.show();
    this.authService.authenticate(this.userName, this.pwd).add(response => {
        if (response.success){
            this.router.navigate([ROUTE_NAME, EVENTUAL_PARAMETER]); // route name would be admin, for example
        } else {
            // display a message, log or do something with the result
        }
  }