angular - 在登录页面请求之前检查会话

问题描述

我正在尝试让我的登录页面检查会话是否已经在运行然后只是路由到主页但是由于我的登录页面是一个角度模式所以每当我放置 if 条件时它会检查但它首先显示模式视图和然后检查会话是否正在运行，如果它发现会话正在运行，它会转到主页，但在模式视图中显示主页，这不是其默认视图。这是我正在获取图片的视图的链接。但我的主页看起来像这个主页。

这是我的登录页面html代码

<div class="card" id="LoginArea" [@routerTransition]>
<div background="../../assets/images/bghome.jpg">
<div #cardBody class="body">     
    <form #loginForm="ngForm" id="LoginForm" method="post" novalidate (ngSubmit)="login()">
            <h4 class="text-center">{{l("LogIn")}} 
                <span *ngIf="tenantName"> in to  {{tenantName | uppercase }}@</span>
            </h4>
                    <div class="col-xs-12">
                            <div class="change-tenant-anchor">
                        <a  routerLink="/account/workspace">Change Workspace</a>
                    </div>
                </div>
        <div class="input-group">
            <span class="input-group-addon">
                <i class="material-icons">person</i>
            </span>
            <div class="form-line">
                <input materialInput [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="Username or Email" name="userNameOrEmailAddress" required maxlength="255" />
            </div>
        </div>

        <div class="input-group">
            <span class="input-group-addon">
                <i class="material-icons">lock</i>
            </span>
            <div class="form-line">
                <input materialInput type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
            </div>
        </div>
        <div class="row">
            <div class="col-xs-8 p-t-5">
                <input type="checkbox"  [(ngModel)]="loginService.rememberMe" name="rememberMe" id="rememberme" class="filled-in chk-col-pink" value="true">
                <label for="rememberme">{{l("RememberMe")}}</label>
            </div>
            <div class="col-xs-8 p-t-5">
                <a [routerLink]="['/account/password-reset']">Forgot password?</a>
            </div>
            <div class="col-xs-4">
                <button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit">{{l("LogIn")}}</button>
            </div>
        </div>

        <div class="row">

        </div>

        <div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">

        </div>
    </form>
</div>
</div>

打字稿代码

import { AppConsts } from '@shared/AppConsts';
import { Component, Injector, ElementRef, ViewChild, ViewEncapsulation, 
OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AppComponentBase } from '@shared/app-component-base';
import { LoginService } from './login.service';
import { accountModuleAnimation } from '@shared/animations/routerTransition';
import { AbpSessionService } from '@abp/session/abp-session.service';
import { SharedDataService } from '@shared/service-proxies/service-proxies';
import { IsTenantAvailableInput } from '@shared/service-proxies/service- 
proxies';
import { AccountServiceProxy, EmailConfirmationDto } from '@shared/service- 
proxies/service-proxies';

 @Component({
 templateUrl: './login.component.html',
 encapsulation: ViewEncapsulation.None,
 styleUrls: [
    './login.component.less'
 ],
 animations: [accountModuleAnimation()]
 })
 export class LoginComponent extends AppComponentBase implements OnInit {

 @ViewChild('cardBody') cardBody: ElementRef;

 submitting: boolean = false;
 tenantName: string | undefined;
 user: EmailConfirmationDto = new EmailConfirmationDto();

 active: boolean = false;
 saving: boolean = false;

 constructor(
    injector: Injector,
    public loginService: LoginService,
    private _router: Router,
    private _sessionService: AbpSessionService,
    private _sharedDataService: SharedDataService
 ) {
    super(injector);

    if (this._sharedDataService.getMessage()) {
        this.tenantName = this._sharedDataService.getMessage();
        this._sharedDataService.setId(undefined);
    } else if (this._sharedDataService.getId()) {
        this.tenantName = undefined;
        this._sharedDataService.setId(undefined);
    } else {
        this.tenantName = (!this.appSession.tenant ? undefined : 
 this.appSession.tenant.tenancyName);
    }
}

ngOnInit() {
    if(this._sessionService.userId) {
        this._router.navigate(['/app/home']);
    }
}

ngAfterViewInit(): void {
    $(this.cardBody.nativeElement).find('input:first').focus();
}

get multiTenancySideIsTeanant(): boolean {
    return this._sessionService.tenantId > 0;
}

get isSelfRegistrationAllowed(): boolean {
    if (!this._sessionService.tenantId) {
        return false;
    }

    return true;
}

login(): void {
    this.submitting = true;
    this.loginService.authenticate(
        () => this.submitting = false
    );
  }
}

标签： angulartypescript

angular - 在登录页面请求之前检查会话

问题描述

解决方案

推荐阅读