Angular CanActivate路由器防护无法正常工作 [英] Angular canActivate router guard not working

问题描述

由于某种原因，我的费用类别详细信息保护措施未按预期工作.当我给出有效的"id"时，到成本类别细节的路由工作就很好了.编号或单击我的成本类别"组件中的某个项目.如果我输入"localhost/44300/cost-ca/42"，那么我应该重定向到我的cost-categories.component.html页面，因为该"id"在我的数据中不存在.但是，当我键入一个不存在的ID时，防护程序似乎无法正常工作，并将我重定向到没有任何数据的cost-categories-detail页面.

For some reason my cost-categories-details guard isn't working as intended. The routing to the cost-category-details works just fine when I give a valid "id" number or click on an item in my cost-categories component. If I type in "localhost/44300/cost-ca/42" then I should be redirected back to my cost-categories.component.html page since that 'id' does not exist in my data. However, the guard doesn't seem to work and redirects me to the cost-categories-detail page without any data when I type an id that doesn't exist.

如果"id"为在数据中为null时，那么我想显示一个警报，然后路由回到成本类别列表"页面.请帮忙！

If the "id" is null in the data, then I want to display an alert and route back to the cost-categories-list page. Please help!

cost-categories-details.guard.ts

cost-categories-details.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CostCategoriesDetailsGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    let id = +next.url[1].path;
    if (isNaN(id) || id < 1) {
      alert('Invalid well Id');
      this.router.navigate(['/cost-categories']);
      return false;
    }
    return true;
  }
}

app-routing-module.ts

app-routing-module.ts

const routes: Routes = [

  {path: '', component: CostCompareComponent, canActivate: [MsalGuard]},
  {path: 'cost-categories', component: CostCategoriesComponent},
  {path: 'cost-categories/:id', component: CostCategoriesDetailsComponent, canActivate: [CostCategoriesDetailsGuard]},
  {path: '**', component: NotfoundComponent},
];

推荐答案

此代码:

if (isNaN(id) || id < 1) {
  alert('Invalid well Id');
  this.router.navigate(['/cost-categories']);
  return false;
}

仅检查id是否为数字，并且该数字是否大于1.此防护中没有代码来检查是否存在具有该数字的ID.

Is only checking whether the id is a number and if that number is greater than 1. There is no code in this guard to check whether there is an existing Id with that number.

根据代码的其他部分，您最好将其重定向到未找到"页面.从详细信息页面本身.因此，当详细信息页面中的代码请求未找到其ID的产品时，它将使用 this.router.navigate 进行导航.

Depending on the other parts of your code, you may be better off redirecting the "not found" from the details page itself. So when the code in the detail page requests a product with an id that is not found, it would use the this.router.navigate to navigate back.

或考虑使用路由解析器获取数据.然后，您可以从路由解析器重新路由，而无需先进入详细信息页面.

Or consider using a route resolver to get the data. Then you could re-route from the route resolver without first going to the detail page.

这篇关于Angular CanActivate路由器防护无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！