Angular Routing 总是在组件之前显示 url答案

【问题标题】：Angular Routing always show url before componentAngular Routing 总是在组件之前显示 url
【发布时间】：2020-07-21 11:14:29
【问题描述】：

我不知道会发生什么，但是在我的 Angular 7 应用程序中，当我通过浏览器输入一些 url 时，它总是跟随我正在输入的 url。示例：

打字 => http://localhost:4200/xxx

结果 => http://localhost:4200/xxx/dashboard

打字 => http://localhost:4200/ooo

结果 => http://localhost:4200/ooo/dashboard

在 RouteTracing url xxx 或 ooo 无法读取，NavigationStartUrl 始终为“/”（附图）

这是我的 AuthGuard：

canActivate(route: ActivatedRouteSnapshot) {
    const currentUser = this.service.currentUserValue;
    if (currentUser) {
        let roles = route.data['allowedRoles'] as Array<string>;
        if(roles){
            roles.forEach(role=>{
                if(currentUser.URole == role){
                    return true;
                }else{
                    this.router.navigateByUrl('/forbidden');
                    return false;
                }
            })
        }
        return true;
    }else{
        this.router.navigateByUrl('/login');
        return false;
    }
}

这是我的 AppRoute ：

const routes: Routes = [
  {path:'',redirectTo:'dashboard',pathMatch:'full'},
  {path:'dashboard',component:DashboardComponent,canActivate: [AuthGuard]},
  {path:'section',component:SectionComponent,canActivate: [AuthGuard]},
  {path:'subsection',component:SubsectionComponent,canActivate: [AuthGuard]},
  {path:'equipment',component:EquipmentComponent,canActivate: [AuthGuard]},
  {path:'downtime',component:DowntimeComponent,canActivate: [AuthGuard]},
  {path:'user',component:UserComponent,canActivate: [AuthGuard],data:{allowedRoles:['Admin']}},
  {path:'mainfailure',component:MainfailureComponent,canActivate: [AuthGuard]},
  {path:'failureaction',component:FailureactionComponent,canActivate: [AuthGuard]},
  {path:'failuremechanism',component:FailuremechanismComponent,canActivate: [AuthGuard]},
  {path:'failuremode',component:FailuremodeComponent,canActivate: [AuthGuard]},
  {path:'failurecause',component:FailurecauseComponent,canActivate: [AuthGuard]},
  {path:'login',component:LoginComponent},
  {path:'forbidden',component:ForbiddenComponent},
  {path:'**',redirectTo:'dashboard'}
];

我在路由中启用了跟踪，但是我输入到浏览器的每个 xxx 总是说它是“/”，这是日志： Routes Log

【问题讨论】：

请展示一个重定向到仪表板的按钮或链接示例。
@PedroLima 通过链接访问时可以，但是当我输入浏览器 url 时，输入总是如下，例如：http:/localhost:4200/dosa 然后浏览器 url 结果是 http:localhost:4200 /dosa/home/仪表板

标签： javascript angular authentication routes guard

【解决方案1】：

Setting up redirects 的这个指南，来自 Angular 官方网站，将重定向 after 放在目标重定向路由和 before 通配符路由，所以也许你应该试试这个：

const routes: Routes = [
  {path:'dashboard',component:DashboardComponent,canActivate: [AuthGuard]},
  {path:'section',component:SectionComponent,canActivate: [AuthGuard]},
  {path:'subsection',component:SubsectionComponent,canActivate: [AuthGuard]},
  {path:'equipment',component:EquipmentComponent,canActivate: [AuthGuard]},
  {path:'downtime',component:DowntimeComponent,canActivate: [AuthGuard]},
  {path:'user',component:UserComponent,canActivate: [AuthGuard],data:{allowedRoles:['Admin']}},
  {path:'mainfailure',component:MainfailureComponent,canActivate: [AuthGuard]},
  {path:'failureaction',component:FailureactionComponent,canActivate: [AuthGuard]},
  {path:'failuremechanism',component:FailuremechanismComponent,canActivate: [AuthGuard]},
  {path:'failuremode',component:FailuremodeComponent,canActivate: [AuthGuard]},
  {path:'failurecause',component:FailurecauseComponent,canActivate: [AuthGuard]},
  {path:'login',component:LoginComponent},
  {path:'forbidden',component:ForbiddenComponent},
  {path:'',redirectTo:'dashboard',pathMatch:'full'},
  {path:'**',redirectTo:'dashboard'}
];

【讨论】：

谢谢，经过这么长时间的搜索，问题不在于路由模块或身份验证，我不小心将 index.html 中的 base href 从 '/' 更改为 ''

【解决方案2】：

谢谢，经过这么长时间的搜索，问题不在routemodule或auth，我不小心将index.html中的base href从'/'更改为''

【讨论】：