Angular 刷新后路由数据为空或在浏览器中直接输入 url

Question

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

如果我点击 link 按钮，路线数据可用，但如果直接在浏览器中输入 url 或刷新页面，然后路线 data 不可用。

路由器模块路由：

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;
  }
}

Answer 1

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

点击 link - 父路由的第一个守卫已经被调用，当你点击 link 到你 UserDetails 页面时，只有第二个会被调用并且会有数据可用
正在刷新页面——第一个和第二个守卫将被一个一个调用。第一个没有可用数据属性，因此没有数据。您不必使用 AuthGuard 两次，因为它将为子路由调用，因为它在父路由中。只需将数据属性移动到父级并将其从子级中删除或仅将其从父级中删除。

Angular 刷新后路由数据为空或在浏览器中直接输入 url

Angular route data empty after refresh or enter direct url in browser

angular

angular-router

angular-activatedroute