时间戳

首页 > 解决方案 > 如果电子邮件来自管理员，我如何验证并将其重定向到特殊窗口

angular - 如果电子邮件来自管理员，我如何验证并将其重定向到特殊窗口

问题描述

我希望在输入邮件时，一个特定的窗口将其重定向，并且当它是一个普通用户时重定向到另一个。我该怎么做？因为在验证时，无论我是否是管理员，它总是将我拉到同一点。

我使用 Angular、Ionic 和 FireBase 数据库工作

这是 HTML

    <ion-content padding class="form-content">
    <form class="form" [formGroup]="validations_form" (ngSubmit)="tryLogin(validations_form.value)">
    <ion-item>
      <ion-label position="floating" color="primary">Email</ion-label>
      <ion-input type="text" formControlName="email"></ion-input>
    </ion-item>
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.email">
        <div class="error-message" *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-item>
      <ion-label position="floating" color="primary">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.password">
        <div class="error-message" *ngIf="validations_form.get('password').hasError(validation.type) && (validations_form.get('password').dirty || validations_form.get('password').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!validations_form.valid">Log In</ion-button>
    <label class="error-message">{{errorMessage}}</label>
  </form>
<p class="go-to-register">
No account yet? <a (click)="goRegisterPage()">Create an account.</a>
  </p>
</ion-content>

这是ts

    export class LoginPage implements OnInit {
    validations_form: FormGroup;
     errorMessage: string = '';

  validation_messages = {
   'email': [
     { type: 'required', message: 'Email is required.' },
     { type: 'pattern', message: 'Please enter a valid email.' }
   ],
   'password': [
     { type: 'required', message: 'Password is required.' },
     { type: 'minlength', message: 'Password must be at least 5 characters long.' }
   ]
 };

  constructor(
    private authService: AuthService,
    private formBuilder: FormBuilder,
    private router: Router
  ) { }
  ngOnInit() {
    this.validations_form = this.formBuilder.group({
      email: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])),
      password: new FormControl('', Validators.compose([
        Validators.minLength(5),
        Validators.required
      ])),
    });
  }
  tryLogin(value){
    this.authService.doLogin(value)
    .then(res => {
      this.router.navigate(["/home"]);
    }, err => {
      this.errorMessage = err.message;
      console.log(err)
    })
  }
  goRegisterPage(){
    this.router.navigate(["/register"]);
  }
}

任何帮助，我将不胜感激

标签： angulartypescriptfirebaseionic-framework

解决方案

您可以建立一个守卫，在激活时返回正确的目的地。所以你总是将登录的用户发送到一个公共路由，但如果有必要，激活保护重定向它。一个示例路由配置：

const routes: Routes = [
  {
    path: '/common-users-route',
    component: CommonUsersComponent,
    canActivate: [CommonUsersRouteGuard]
  },
  {
    path: '/administrator-route',
    component: AdministratorComponent,
    canActivate: [AdministratorRouteGuard]
  },
]

CommonUsersRouteGuard：

constructor(private _router: Router, private _userService: UserService) {}

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

  if(this._userService.isAdministrator()) {
    return this._router.parseUrl('/administrator-route');
  }

  return true;
}

管理员RouteGuard：

constructor(private _router: Router, private _userService: UserService) {}

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

  if(this._userService.isAdministrator()) {
    return true;
  }

  return this._router.parseUrl('/common-users-route');
}

推荐阅读