Javascript 在加载组件之前重定向用户

如果没有cookie设置，我想将用户重定向到主页

我的问题是，用户可能会被重定向，但它需要的时间太长。在大约1秒的时间里，他们仍然能够看到受保护的页面。我怎样才能防止这种情况

恩戈尼特{ this.hasAccess.thenresult=>{ 如果！结果{ 这个.router.navigate['/']； } }; } 私人通道{ 返回新PromiseSolve=>{ this.login.haskookiethis.cookieService.get'login'。subscribeHaskookie=>{ 如果hasCookie==1{ 返回新承诺=>{ this.login.getCookie.subscribecookieFromServer=>{ 如果cookieFromServer==this.cookieService.get'login'{ 返回true； }否则{ 返回false； } }; }; } 返回false； }; }; 我还尝试在构造函数中运行hasAccess函数，而不是ngonit函数，但问题仍然是一样的。

使用如下RouteGuard：

export class ComponentRouteGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        if (this.isCookieSet) {              
                return true;              
        } else {
            this.router.navigate([`unauthorized`]);           
            return false; 
        }
    }
}

使用如下RouteGuard：

export class ComponentRouteGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {

        if (this.isCookieSet) {              
                return true;              
        } else {
            this.router.navigate([`unauthorized`]);           
            return false; 
        }
    }
}

您应该使用。它们会在路由加载其内容之前检查路由是否可以访问

@注射的 导出类CookieGuard实现CanActivate{ 建造师 私人厨师服务：厨师服务， 私人登录：登录服务 {} canActivatenext:ActivatedRouteSnapshot，状态：RouterStateSnashot:Observable | Promise | boolean{ 返回这个.login.haskookiethis.cookieService.get'login'； } } 从您的笔记中不清楚this.login是什么，您需要调整它以适应您的设置。然后您可以使用以下防护配置路由：

常数路由：路由[]=[ {path:'/whatever'，component:WhateverComponent，canActivate:[CookieGuard]} ]; 您应该使用。它们会在路由加载其内容之前检查路由是否可以访问

@注射的 导出类CookieGuard实现CanActivate{ 建造师 私人厨师服务：厨师服务， 私人登录：登录服务 {} canActivatenext:ActivatedRouteSnapshot，状态：RouterStateSnashot:Observable | Promise | boolean{ 返回这个.login.haskookiethis.cookieService.get'login'； } } 从您的笔记中不清楚this.login是什么，您需要调整它以适应您的设置。然后您可以使用以下防护配置路由：

常数路由：路由[]=[ {path:'/whatever'，component:WhateverComponent，canActivate:[CookieGuard]} ];

---

可能对整个组件内容使用ngIf来避免显示受保护的内容？我知道这不是一个解决方案，但作为一种变通方法它可以工作。使用angular可能对整个组件内容使用ngIf来避免显示受保护的内容？我知道这不是一个解决方案，但作为变通方法它可以工作。使用angular

You can use Angular gurad.

    @Injectable({
      providedIn: 'root'
    })
    export class YourGuard implements CanActivate {
      path: ActivatedRouteSnapshot[];
      route: ActivatedRouteSnapshot;

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

      canActivate() {


        if (your logic) {
         ....
        }
        else redirect to ...
    }

    in your routing.module :



    {
          path: 'your path',
          loadChildren: () => import('path')
            .then(m => m.YorModule),
            canActivate:[YourGuard]
        },