Javascript 当我使用CTRL+；重新加载时，页面重定向到主页；角8中的R

当我使用CTRL+R或F5重新加载页面或打开新选项卡时，将始终以8键重定向到主页

我的路线设置在这里

const routes: Routes = [
  { path: 'dashboard', component: OrderComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'orders', component: OrderComponent, canActivate: [AuthGuard] },
  { path: 'add-product', component: AddProductComponent, canActivate: [AuthGuard] },
  { path: 'past-orders', component: PastOrdersComponent, canActivate: [AuthGuard] },
  { path: 'today-orders', component: TodayOrdersComponent, canActivate: [AuthGuard] },
  { path: 'schedule-orders', component: ScheduleOrdersComponent, canActivate: [AuthGuard] },
  { path: 'products', component: ProductsComponent, canActivate: [AuthGuard] },
  { path: 'edit-product/:product_id', component: AddProductComponent, canActivate: [AuthGuard] },
  { path: 'invoice/:order_id', component: InvoiceComponent },
  { path: 'accept-order/:order_id', component: SingleOrderComponent, canActivate: [AuthGuard] },
  { path: 'timing', component: TimingComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
  { path: '**', component: PageNotFoundComponent },
];

@NgModule({
  // { useHash: true }
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload', enableTracing: false, useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的功能是打开一个不应重定向到主页的新选项卡

    const url = this.router.serializeUrl(
      this.router.createUrlTree(['/invoice', '8088299'])
    );

 window.open(url, '_blank');

auth.guard.ts

export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    if (!this.authService.isLoggedin()) {
      this.router.navigate(['login']);
});
      return false;
    }

    return true;
  }

}

this.authService.isLoggedin（）下面的函数代码不是HTTP请求

 isLoggedin() {
    // `!!` returns boolean
    return !!localStorage.getItem('token');
  }

---

canActivate

方法在解析authService.isLoggedin（）之前返回。您需要在authService.isLoggedin（）返回响应后返回响应始终从isLoggedIn方法返回一个可观察值。一旦您这样做，您的canActivate方法可能会如下所示：

   

    export class AuthGuard implements CanActivate {
    
      constructor(private authService: AuthService, private router: Router) { }
    
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  Observable<boolean>| Promise<boolean>| boolean{
       return  this.authService.isLoggedin()
            .pipe(
              map(
                response => {
                  if (response === true) {
                    return true;
                  }else{
                       this.router.navigate(['login']);
                       return false;
                  }
                }),catchError((err: HttpErrorResponse) => {
                  this.router.navigate(['login']);
                  return of(false)
                })
            );
        }
      }

导出类AuthGuard实现了CanActivate{
构造函数（私有authService:authService，私有路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的|承诺|布尔值{
返回这个.authService.isLoggedin（）
.烟斗(
地图(
响应=>{
如果（响应===true）{
返回true；
}否则{
this.router.navigate（['login']）；
返回false；
}
})，catchError（（err:HttpErrorResponse）=>{
this.router.navigate（['login']）；
返回（假）
})
);
}
}

canActivate

方法在解析authService.isLoggedin（）之前返回。您需要在authService.isLoggedin（）返回响应后返回响应始终从isLoggedIn方法返回一个可观察值。一旦您这样做，您的canActivate方法可能会如下所示：

   

    export class AuthGuard implements CanActivate {
    
      constructor(private authService: AuthService, private router: Router) { }
    
      canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):  Observable<boolean>| Promise<boolean>| boolean{
       return  this.authService.isLoggedin()
            .pipe(
              map(
                response => {
                  if (response === true) {
                    return true;
                  }else{
                       this.router.navigate(['login']);
                       return false;
                  }
                }),catchError((err: HttpErrorResponse) => {
                  this.router.navigate(['login']);
                  return of(false)
                })
            );
        }
      }

导出类AuthGuard实现了CanActivate{
构造函数（私有authService:authService，私有路由器：路由器）{}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：可观察的|承诺|布尔值{
返回这个.authService.isLoggedin（）
.烟斗(
地图(
响应=>{
如果（响应===true）{
返回true；
}否则{
this.router.navigate（['login']）；
返回false；
}
})，catchError（（err:HttpErrorResponse）=>{
this.router.navigate（['login']）；
返回（假）
})
);
}
}

您必须验证您的令牌在auth guard服务中是否有效，然后使用布尔值返回结果，同时重定向到相应的页面

身份验证服务应如下所示

@Injectable()
export class AuthService {

    constructor() { }

    public isAuthenticated(): boolean {
        const token = localStorage.getItem('token');
        return token != null;
    }
}

假设您有以下几条路线

/product
/product/:product-id

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'product',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: ProductComponent },
      { path: ':id', component: ProductIdComponent }
    ]
  },
];

那么您的路线应该按如下方式启动

/product
/product/:product-id

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'product',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: ProductComponent },
      { path: ':id', component: ProductIdComponent }
    ]
  },
];

使用这种方式，您甚至可以重新加载、重定向或直接在浏览器中输入URL，并输入需要重定向的动态页面

在本地存储中有令牌之前，产品id页是可访问的

这不是一个好的做法，因为您在客户端身份验证上留下了一个很大的安全漏洞，尝试使用一些带有Promise和HTTP或JSON web令牌的服务器端身份验证，即使您可以在每次发送请求时将令牌发送到服务器，并在继续执行客户端请求之前从服务器端进行验证

请检查此存储库以详细查找您的解决方案

---

您必须验证您的令牌在auth guard服务中是否有效，然后使用布尔值返回结果，同时重定向到相应的页面

身份验证服务应如下所示

@Injectable()
export class AuthService {

    constructor() { }

    public isAuthenticated(): boolean {
        const token = localStorage.getItem('token');
        return token != null;
    }
}

假设您有以下几条路线

/product
/product/:product-id

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'product',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: ProductComponent },
      { path: ':id', component: ProductIdComponent }
    ]
  },
];

那么您的路线应该按如下方式启动

/product
/product/:product-id

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  {
    path: 'product',
    canActivate: [AuthGuard],
    children: [
      { path: '', component: ProductComponent },
      { path: ':id', component: ProductIdComponent }
    ]
  },
];

使用这种方式，您甚至可以重新加载、重定向或直接在浏览器中输入URL，并输入需要重定向的动态页面

在本地存储中有令牌之前，产品id页是可访问的

这不是一个好的做法，因为您在客户端身份验证上留下了一个很大的安全漏洞，尝试使用一些带有Promise和HTTP或JSON web令牌的服务器端身份验证，即使您可以在每次发送请求时将令牌发送到服务器，并在继续执行客户端请求之前从服务器端进行验证

请检查此存储库以详细查找您的解决方案

---

您是否也可以添加AuthGuard的代码。未启用AuthGuard的路由是否会出现此问题？为了更好地理解，请共享AuthGuard代码？您如何为您的应用程序提供服务？@RahulSingh Added您可以共享您的AuthGuard代码吗？您也可以为AuthGuard添加代码。未启用AuthGuard的路由是否会出现此问题？请共享AuthGuard代码，以便更好地理解？您是如何为您的应用程序提供服务的？@rahussingh added如果您同时添加所有代码，您可以共享您的AuthGuard吗。不管怎样，您能添加在本地存储中设置项的代码吗？localStorage.setItem（'token'，received_token）；使用您提供的最少代码，条件应该类似于

if（received_-token&&localStorage.getItem（'token'）==null）{localStorage.setItem（'token'，received_-token）}

。顺便说一句，您是如何获取收到的\u令牌的？如果您同时添加所有代码，那就太好了。不管怎样，您能添加在本地存储中设置项的代码吗？localStorage.setItem（'token'，received_token）；使用您提供的最少代码，条件应该类似于

if（received_-token&&localStorage.getItem（'token'）==null）{localStorage.setItem（'token'，received_-token）}

。顺便说一句，你是如何取回收到的令牌的？非常感谢，它修复了我的问题