angular - 为什么 Angular 登录后登录页面会闪烁？

Question

我的问题是，登录后我将页面导航到仪表板页面，URL 似乎是 http://localhost:4200/home但是当我将 URL 更改为 http://localhost:4200 时它向我显示默认登录页面几秒钟，然后重定向到 http://localhost:4200/home .

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

在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: '' 应重定向到主页而不是登录页面。 如果用户未登录，您可以从那里重定向到登录页面。

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