Angular 角色守卫有时允许进入本地主机上的安全组件

我的角色守卫看起来像这样：

import { CanLoad, Route } from "@angular/router";
import { AuthenticationService } from "../_services";
import { Injectable } from "@angular/core";

@Injectable({ providedIn: 'root' })
export class RoleGuard implements CanLoad {

    constructor(private authService: AuthenticationService) { }

    canLoad(route: Route) {
        let authorities = route.data.roles;
        if (this.authService.hasAnyRole(authorities)) {
            return true;
        }
        return false;
    }

}

以及我在authService中的方法：

 hasAnyRole(roles: string[]): boolean {
        for (let i = 0; i <= roles.length; i++) {
            if (this.hasRole(roles[i])) {
                return true;
            }
        }
        return false;
    }

    hasRole(role: string): boolean {
        let authorities = this.getAuthority();
        return authorities.findIndex(a => a === role) > -1;
    }

组件的用户授权角色在路径的数据中提供，并签入AuthorizationService。方法从令牌中获取用户的角色，并将其与路径数据中提供的角色进行比较。

---

问题是防护装置不能正常工作。有时，它允许未经授权的用户在应用程序提供服务时，在第一次登录后，允许本地主机上的安全组件进入。你能告诉我我的防护装置出了什么问题吗？

问题可能出在

CanLoad

上

CanLoad

Gaurd保护要加载的

模块

，但一旦加载了

模块

，则

CanLoad

保护不起任何作用

例如，假设一个用户登录应用程序并导航到某个模块。之后，他点击注销。现在，如果用户需要，他将能够导航到相同的模块，因为它已经加载

因此，如果要保护应用程序，最好使用

CanActivate

将

CanActivate

添加到您的角色库中

---

它是否进行任何API调用或异步任务来检查角色？谢谢帮助。我同时使用了canLoad和canActivate，以防止未经授权的用户加载模块并进入安全组件。

const appRoutes: Routes = [
    {
        path: 'login',
        component: LoginComponent,
        canActivate: [NoAuthGuard]
    },
    {
        path: 'password',
        component: PasswordComponent,
        canActivate: [NoAuthGuard]
    },
    {
        path: 'change-password',
        component: ChangePasswordComponent,
        canActivate: [ChangePasswordGuard]
    },
    {
        path: 'reset-password',
        component: ResetPasswordComponent,
        canActivate: [ResetPasswordGuard],
        resolve: {
            recoverPassword: ResetPasswordGuard
        }
    },
    {
        path: '',
        component: HomeComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'users',
                loadChildren: '../app/users/users.module#UsersModule',
                canLoad: [RoleGuard],
                data: { roles: ['AK.W.1'] }
            },
            {
                path: 'products',
                loadChildren: '../app/products/products.module#ProductsModule',
                canLoad: [RoleGuard],
                data: { roles: ['AK.W.1', 'AK.W.2'] }
            },
            {
                path: 'codes',
                loadChildren: '../app/codes/codes.module#CodesModule',
                canLoad: [RoleGuard],
                data: { roles: ['AK.W.1', 'AK.W.2'] }
            },
            {
                path: 'reports',
                loadChildren: '../app/reports/reports.module#ReportsModule',
                canLoad: [RoleGuard],
                data: { roles: ['AK.W.1','AK.W.2','AK.W.3'] }
            }
        ]
    },
    { path: '**', redirectTo: '' }
];

import { CanLoad, CanActivate, Route,Router,
 ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthenticationService } from "../_services";
import { Injectable } from "@angular/core";

@Injectable({ providedIn: 'root' })
export class RoleGuard implements CanLoad, CanActivate {

    constructor(private authService: AuthenticationService,private router: Router) { }

    canLoad(route: Route) {
        let authorities = route.data.roles;
        if (this.authService.hasAnyRole(authorities)) {
            return true;
        }
        return false;
    }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let authorities = route.data.roles;
        if (this.authService.hasAnyRole(authorities)) {
            return true;
        }
        return false;
     }

   }