当我在 Angular 8 中使用 CTRL + R 重新加载时，页面重定向到主页

Question

当我使用 CTRL + R 或 F5 重新加载页面或打开新选项卡时，总是在 angular 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');
  }

Answer 1

canActivate 方法 returns 在 authService.isLoggedin() 解决之前。一旦 authService.isLoggedin() return 回复，您需要 return 回复。 Return 从您的 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)
                })
            );
        }
      }

Answer 2

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

授权服务应该如下所示

@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 }
    ]
  },
];

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

在本地存储中拥有令牌之前，可以访问产品 ID 页面。

This is not a good practice as you leave a big security hole on client-side auth validation, try to use some server-side auth validations with Promise and HTTP or JSON web token, even you can send the token to the server each time you send a request and validate from server-side before proceeding the client request.

请查看此存储库以详细了解您的解决方案 https://stackblitz.com/github/aslamanver/angular-sample-authguard

当我在 Angular 8 中使用 CTRL + R 重新加载时，页面重定向到主页

Page redirects to homepage when i reload using CTRL + R in Angular 8

javascript

angular

angular8