使用 Angular 仅供管理员在网站中访问

make only accessible for Admin in Website with Angual

我的“商店网站”中有一些组件。有一个组件应该只能由管理员访问。在本地存储中有一个令牌 isAdmin。我现在已经实现了当管理员登录时,一个特殊的组件只显示在主站点上。但是你输入这个组件的 link 的 ID (http://localhost:4200/Authorize) 它会显示给所有人。我如何实现它应该只供管理员访问。

您必须在路由定义中使用 canActivate。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        canActivate: [AuthGuard]
      }
    ])
  ],
})

您可以创建自定义条件作为 AuthGuard:

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(
  ) {}

  canActivate() {
    if (somthing) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }

查看文档https://angular.io/api/router/CanActivate