Question

我已经准备好角度6的模板，我需要添加默认的consumer_login页面

尝试创建消费者的组件并在路由器中指定路径

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

我希望在运行Ng服务时，默认页面需要为Consumer_login页面

Answer 1

您可以像这样将consumer_login页面设置为默认主页。

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

Answer 2

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

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

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

// Create the thing you need the function to return, whatever that looks like.
var response = new SendGrid.Response(someStatusCode, body, headers); 

// create a function that returns it.
var functionMock = new Func<SendGrid.Response>(() => response);

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

重要：不需要访问身份验证的所有路由（登录，联系方式，AboutUs等），请勿使用“ canActivate”属性。

3） AuthenticationGuard ：在此处检查您是否通过了身份验证（布尔返回）

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

4） AuthenticationService ：由于我们需要将身份验证状态存储在某处，因此我创建了同时由Guard和LoginPage使用的服务。我将在这里简化它，但是它需要一些业务逻辑，例如调用API或类似的东西。另外，这取决于您是否要使用OAuth之类的第三方组件（问题中没有描述，因此我将跳过）。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from '../services/authentication.service';
import { Page, RouterService } from '../service-tools/router.service';
import { Observable } from 'rxjs';

@Injectable()
export class AuthenticationGuard implements CanActivate {

  constructor(private auth: AuthenticationService,
    private router:RouterService) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (!this.auth.isAuthenticated){
       // log or display a message saying that the access to the page requires authentication
    }
    else
      return true;
  }
}

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

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
  }
}

这就是我通常要做的。希望能帮助到你。干杯

如何为现有的角度网站添加默认登录页面

2 个答案: