Angular 프로젝트에서 권한 제어를 구현하는 방법에 대해 이야기해 볼까요?

Angular 프로젝트에서 권한 제어를 구현하는 방법은 무엇입니까? 다음 문서에서는 코드 예제를 사용하여 Angular 프로젝트에서 권한 제어를 구현하는 방법에 대해 설명합니다. 모든 사람에게 도움이 되기를 바랍니다.

이전 기사에서는 Angular 컴포넌트 통신에 대해 이야기했습니다. 이 글에서는 프로젝트 개발 중에 그러한 요구 사항이 발생할지 여부에 대해 설명합니다. 사용자가 로그인을 기반으로 액세스할 수 있는 콘텐츠를 제한하십시오. [관련 튜토리얼 추천: "angular 튜토리얼"]

그래서 권한 제어에 관한 것입니다.

사용자 권한 제한의 경우 일반적으로 다음과 같은 처리 방법이 있습니다.

• 사용자 로그인 메뉴 제어

• 사용자 행동 제한

설명하기 위해 Angular code>와 결합합니다. 이 주제. <code>Angular 来讲解下这个话题。

菜单路由控制

系统开发的时候，会有很多的菜单，这个时候，就需要后端判断用户的角色，按照用户的权限返回不同的菜单路由。

返回的数据格式需要我们按照自己在 app-routing.module.ts 中编写好的路由路径对应。

比如，我们有路由文件如下：

// app-routing.module.ts

const routes: Routes = [
  {
    path: 'user-manage',
    component: AuthLayoutComponent, // 通过鉴权的组件
    children: [
      {
        path: '',
        redirectTo: 'user',
        pathMatch: 'full'
      },
      {
        path: 'user', // 用户列表
        component: UserComponent
      },
      {
        path: 'user/detail/:uuid', // 用户详情，类似这种不会出现在菜单里面
        component: UserDetailComponent
      },
      {
        path: 'department', // 部门列表
        component: DepartmentComponent
      }
    ]
  },
  // ...
]

在页面中，我们的菜单展示的数据是这样子的：

<!-- demo.component.html -->

<ul nz-menu nzMode="inline" [nzInlineCollapsed]="isCollapsed">
  <li *ngFor="let submenu of menu_data" nz-submenu [nzTitle]="isCollapsed ? &#39;&#39; : submenu.title" [nzIcon]="submenu.icon"
    [nzOpen]="submenu.is_open" (nzOpenChange)="selectMenu(submenu)">
    <ul>
      <li *ngFor="let child of submenu?.children" nz-menu-item nzMatchRouter>
        <a [routerLink]="[&#39;/&#39; + child.url]">{{ child.title }}</a>
      </li>
    </ul>
  </li>
</ul>

定义了一个二级的菜单，拥有下面几个字段：

• title 字段 - 菜单的标题
• url 字段 - 菜单的路由，对应 app-routing.module.ts 中的完整的 path
• icon 字段 - 标题前的小图标，二级标题没有
• is_open 字段 - 菜单是否展开的标识

此时，后端的菜单接口，应该返回类似下面的数据：

// demo.component.ts

public menu_data:any = [
  {
    title: "成员管理",
    url: "user-manage",
    icon: "user-switch", // 这里是用了 angular ant design 的图标
    is_open: false,
    children: [
      {
        title: "用户",
        url: "user-manage/user",
        icon: undefined,
        is_open: false
      },
      {
        title: "部门",
        url: "user-manage/department",
        icon: undefined,
        is_open: false
      }
    ]
  },
  // ...
]

也许你会有疑问?️：二级标题中都用不上 icon 和 is_open 这两个字段，为啥还要写？

嗯～，读者可以对后端返回提要求，但是为了保持数据的可读性和易操作，还是保留为好...

用户行为控制

用户的行为控制，这个的就很细粒度的行为了。小到控制用户的一个按钮的展示等，但是本质来说，都是对后端接口请求的限制?。比如，你请求一个列表，但是你没有权限，那么你就请求不了，报 401 的错误。

我们可以按照需求，针对用户的不同角色，限定用户不能查看或者其他操作。但是，这样很不合理，用户可以通过 postman

메뉴 라우팅 제어

시스템이 개발되면 메뉴가 많아지는데 이때 백엔드는 사용자의 역할을 결정하고 그에 따라야 합니다. 사용자 권한 다른 메뉴 경로를 반환합니다.

반환된 데이터 형식은 app-routing.module.ts에 작성한 라우팅 경로와 일치해야 합니다.

예를 들어 다음과 같은 라우팅 파일이 있습니다.

{
  code: 0,
  msg: 'ok',
  results: {
    getUserList: {
     url: '/api/get/user/list', // 当然，可以按照前后端规定返回，不一定是真实的 url ...
     enable: true
    },
    editUser: {
      url: '/api/edit/:uuid',
      enable: false
    }
  }
}

페이지에서 메뉴에 표시되는 데이터는 다음과 같습니다.

<!-- demo.component.html -->

<button *ngIf="userObj.editUser.enable">Edit</button>

는 다음 필드로 두 번째 수준 메뉴를 정의합니다.

제목 필드 - 메뉴 제목 url 필드 - 메뉴의 라우팅, app-routing.module.ts에 해당 /code> >path🎜🎜icon 필드 - 제목 앞의 작은 아이콘, 보조 제목에는 🎜🎜is_open 필드가 없습니다. 메뉴가 확장됩니다🎜🎜🎜이 시점에서 백엔드 메뉴 인터페이스는 다음과 유사한 데이터를 반환해야 합니다: 🎜rrreee🎜질문이 있으신가요?️: 🎜icon 및 is_open 보조 제목에는 사용되지 않습니다. 왜 이 두 필드를 작성해야 합니까? 🎜🎜🎜글쎄요~ 독자들이 백엔드 반환을 요청할 수 있지만 데이터를 읽기 쉽고 조작하기 쉽게 유지하려면 그대로 유지하는 것이 좋습니다...🎜🎜🎜 사용자 행동 제어🎜🎜🎜사용자 행동 제어는 매우 세분화된 동작입니다. 이는 사용자를 위한 버튼 표시를 제어하는 ​​것만큼 작을 수 있지만 본질적으로 백엔드 인터페이스 요청에 대한 제한입니다. 예를 들어 목록을 요청했지만 권한이 없으면 요청할 수 없으며 401 오류가 보고됩니다. 🎜🎜🎜🎜us 필요에 따라 사용자는 다양한 역할에 따라 보기 또는 기타 작업을 제한할 수 있습니다. 그러나 이는 불합리합니다. 사용자는 시스템을 통하지 않고 postman과 같은 도구를 통해 요청을 시작할 수 있습니다. 따라서 우리는-🎜🎜🎜백엔드에 제한 계층을 적용해야 합니다🎜🎜🎜다음 데이터 수신과 같이 백엔드에서 반환된 인터페이스 권한을 얻습니다.🎜rrreee🎜데이터를 얻은 후 다음을 사용하여 수행합니다. 단순히 프론트엔드에서 판단하기보다는 프론트엔드에서 저장한 콘텐츠를 비교하고 조건에 따라 제어하는 ​​인터페이스가 필요합니다. 🎜rrreee🎜🎜간단한 프런트 엔드 판단: 1. 유지 관리가 쉽지 않음 2. 안전하지 않아 사용자가 여러 브라우저에서 요청할 수 있음🎜🎜🎜[끝]🎜🎜더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 🎜프로그래밍 소개🎜! ! 🎜

위 내용은 Angular 프로젝트에서 권한 제어를 구현하는 방법에 대해 이야기해 볼까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!