登录系统后，登录页面闪烁

Question

在登录时，我用来生成cookies，我希望当cookies可用时，登录页面应该根本不显示。

在app-routing.module.ts上，我试着写成

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'home', component: LandingpageComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent },
 ];

在AuthGuard上，我编写了如下代码

export class AuthGuard implements CanActivate {

constructor(
private router: Router,
private Cookie: CookieService,
private commonser: CommonService
 ) { }
 readonly LocalStName = require('proxy.config.json');
 GetlocalStoragePermissison: any = [];

 async canActivate(
 next: ActivatedRouteSnapshot,
 state: RouterStateSnapshot): Promise<boolean> {
 if (this.Cookie.getCookie('usertoken')) {
   if (CommonService.GlobalVar === undefined || CommonService.GlobalVar.length === 0) {
    await this.commonser.getuserpermisison();
  }
  if (CommonService.GlobalVar !== undefined && CommonService.GlobalVar.length > 0) {
    for (const a of CommonService.GlobalVar) {
      if (state.url.replace('/', '').toLowerCase() === a.permissionname) {
        return true;
      }
    }
  }
   return false;
  } else {
     this.router.navigate(['/login']);
      return false;
   }
 } 
}

this.commonser.getuserpermisison()；代码如下所示

async getuserpermisison() {
const data: any = await this.service.getuserpermisison();
if (data.length > 0) {
  data.push({
    isactive: 1,
    permissionid: null,
    permissionname: 'home',
    permissions: [2],
    total: 2,
    upmid: null
  }
  );
}
CommonService.GlobalVar = [];
this.SetlocalStoragePermissison = [];
for (const userper of data) {
  userper.permissionname = userper.permissionname.toLowerCase();
  if (userper.total > 0) {
    this.SetlocalStoragePermissison.push(Object.assign({}, userper));
  }
}
CommonService.GlobalVar = this.SetlocalStoragePermissison;
}

登录后，在login.component.ts上单击下面的代码

onSubmit(form: NgForm) {
  this.submitted = true;
  if (form.invalid) {
   return;
 }
this.service.userlogin(form.value.Username, sha512.sha512(form.value.Password)).subscribe(
  async (data: any) => {
    this.Cookie.setCookie('usertoken', data.Token, 1);
    await this.appmethod.getuserpermisison();
    await this.appmethod.getdetails();
    await this.appmethod.callingmethod();
  }, (err: HttpErrorResponse) => {
    if (err.error.message != null) {
      this.commonser.openSnackBarError(err.error.message, 'X');
    } else {
      this.commonser.openSnackBarError(err.message.toString(), 'X');
    }
  });
}

情况是，一旦我成功登录，它将重定向到主页，URL是作为http://localhost:4200/home，但当我放置URL http://localhost:4200时，它不显示登录页面，而是直接重定向到主页

Answer 1

path: ''应该重定向到主页，而不是登录页面。您有authGuard从那里，您正在重定向到登录页面，如果用户没有登录。

const routes: Routes = [
      { path: 'login', component: LoginComponent },
      { path: 'home', component: LandingpageComponent, canActivate: [AuthGuard] },
      { path: '', redirectTo: '/home', pathMatch: 'full' },
      { path: '**', component: NotFoundComponent },
     ];

Answer 2

将宏任务包装在setTimeout函数中。因为基于this.commonser.getuserpermisison();任务规则，await javascript之后的if条件不会等待异步任务完成。

if (CommonService.GlobalVar === undefined || CommonService.GlobalVar.length === 0) {
    await this.commonser.getuserpermisison();
    await setTimeout(() => {
      if (CommonService.GlobalVar !== undefined && CommonService.GlobalVar.length > 0) {
      for (const a of CommonService.GlobalVar) {
        if (state.url.replace('/', '').toLowerCase() === a.permissionname) {
        return true;
      }
      }
    }
    return false;
    }, 1000);
}