0

在访问ActivatedRouteSnapshot 实例中的data属性时，我遇到了 Angular 路由的问题。

如果我通过单击链接按钮，路线数据可用，但如果直接在浏览器中键入 url 或刷新页面，则路线数据不可用。

RouterModule 路由：

const routes: Routes = [
  {
    path: '',
    canActivate: [AuthGuard],
    component: DefaultLayoutComponent,
    children: [
      {
        path: 'usermanagement/userdetails/:username',
        canActivate: [AuthGuard],
        data: { parenturl: 'usermanagement/users', permissions: ["canView", "canAdd", "canEdit"] },
        component: UserDetailsComponent,
        canDeactivate: [CanDeactivateGuard]
      }
   ]
 },
];

身份验证：

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
    private activeRoute: ActivatedRoute,
    private accountService: AccountService
  ) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    var path = route.routeConfig?.path; // not found after refress
    var permissions = route.data["permissions"] // not found after refress
    return false;
  }
}
4

1 回答 1

1

那是因为您AuthGuard在父子路由中使用了两次。让我们谈谈单击链接或刷新页面时发生的情况。

  • 单击链接 - 已调用父路由的第一个保护，当您单击指向您的UserDetails页面的链接时，只会调用第二个保护并且将有可用数据
  • 刷新页面 - 第一个和第二个警卫将被一个接一个地调用。第一个没有可用的数据属性，因此没有数据。您不必使用AuthGuard两次，因为它将为子路由调用，因为它位于父路由中。只需将数据属性移动到父级并将其从子级中删除，或者只是将其从父级中删除。
于 2021-09-07T11:58:03.300 回答