时间戳

首页 > 解决方案 > 浏览器后退按钮以角度 8 重定向到主页

angular8 - 浏览器后退按钮以角度 8 重定向到主页

问题描述

浏览器后退按钮不起作用。它会将我重定向到主页，而不是转到上一页。例如 http://localhost:4200/#/component1/1 http://localhost:4200/#/component2/1 http://localhost:4200/#/component3/1

当我在组件 3 中单击后退按钮时，它会转到组件 2，而不是转到主页。谁能告诉我这个问题的解决方案？

路由.ts

{
    path: 'component1/:id',
    component: Component1,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },

  {
    path: 'component2/:id',
    component: Component2,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },
  {
    path: 'component3/:id',
    component: Component3,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },

oauthcallbackhandlerguard.service.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {

    this.adalService.handleWindowCallback();
    let engId: number = 0;
    let engagementDetailId: number = 0;
    if(route.data.isEngagementDetailId == true)
    {
        let engDetailData =this.engagementService.$engagementDetailId.subscribe((data) => {
            if (data !== undefined && data !== null) {
                engagementDetailId = data;
       
            }
          });
    }
    else
    {
  let engData =this.engagementService.$engagementId.subscribe((data) => {
        if (data !== undefined && data !== null) {
            engId = data;
   
        }
      });
    }

    let groupIds = JSON.parse(sessionStorage.getItem('groupids'));
    return this.validateUserAccess(engId, engagementDetailId, state,groupIds);

}

private validateUserAccess(engId: number, engagementDetailId: number, state: RouterStateSnapshot,groupIds:number[]): Observable<boolean | UrlTree> {
    if (engId > 0 || engagementDetailId>0) {
        return this.authGuardService.validateUserAccess(engagementDetailId, engId,groupIds).map(response => {

            console.log(response);
             return response ? true : this.router.parseUrl('/unauthorized');
            if (response) {
                 this.router.navigate([state.url]);
            }
             else {
                 this.redictToUnAutherized();
             }
         },
          (error) => {
               console.log('auth failed. Error ', error);
                // this.redictToUnAutherized();
                 return false;
          });

    }
    else {
        return Observable.of(true);
    }
}

private redictToUnAutherized() {
    this.router.navigate(['/unauthorized']);
}

标签： angular8

解决方案

1-在不同的浏览器中运行您的应用程序

2-添加默认路由

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
 {
    path: 'component1/:id',
    component: Component1,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },

  {
    path: 'component2/:id',
    component: Component2,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },
  {
    path: 'component3/:id',
    component: Component3,
    canActivate: [OAuthCallbackHandlerGuard],
    data: { isId: true },
  },
  { path: '**', component: HomeComponent }
];

3-尝试检查 OAuthCallbackHandlerGuard 是否要导航页面并使用 Auth 允许它

  constructor (private _location: Location) 
   
  this._location.back();

推荐阅读