Parlons de la façon d'implémenter le contrôle des autorisations dans les projets Angular ?

Comment implémenter le contrôle des autorisations dans les projets Angular ? L'article suivant utilise des exemples de code pour parler des méthodes d'implémentation du contrôle des autorisations dans les projets Angular. J'espère qu'il sera utile à tout le monde !

Dans l'article précédent, nous avons parlé de Communication entre composants angulaires. Dans cet article, nous verrons si vous rencontrerez de tels besoins lors du développement du projet : Veuillez limiter le contenu auquel les utilisateurs peuvent accéder en fonction de leur connexion. [Recommandation de didacticiel connexe : "tutoriel angulaire"]

Il s'agit donc du contrôle des autorisations.

Pour les restrictions d'autorisation des utilisateurs, nous avons généralement les méthodes de traitement suivantes :

• Contrôler le menu de connexion de l'utilisateur

• Restreindre le comportement de l'utilisateur

Nous le combinons avec Angular code> pour expliquer ce sujet. <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

Contrôle du routage du menu

Lorsque le système sera développé, il y aura de nombreux menus. À ce stade, le backend doit déterminer le rôle de l'utilisateur et suivre les autorisations de l'utilisateur Renvoie un itinéraire de menu différent.

Le format des données renvoyées doit correspondre au chemin de routage que nous avons écrit dans app-routing.module.ts.

Par exemple, nous avons le fichier de routage comme suit :

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

Dans la page, les données affichées par notre menu ressemblent à ceci :

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

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

définit un menu de deuxième niveau avec les champs suivants :

title - le titre du menu champ url - le routage du menu, correspondant au app-routing.module.ts >path🎜🎜icon field - la petite icône avant le titre, le titre secondaire n'a pas 🎜🎜is_open field - l'indicateur de savoir si le menu est développé🎜🎜🎜À ce stade, l'interface du menu principal devrait renvoyer des données similaires à celles-ci : 🎜rrreee🎜Peut-être avez-vous des questions ?️ : 🎜icon et is_open ne sont pas utilisés dans les titres secondaires. Pourquoi faut-il encore écrire ces deux champs ? 🎜🎜🎜Eh bien~, les lecteurs peuvent faire des demandes de retour backend, mais afin de garder les données lisibles et faciles à utiliser, il est préférable de les conserver...🎜🎜🎜 Contrôle du comportement des utilisateurs🎜🎜🎜Contrôle du comportement des utilisateurs, il s'agit d'un comportement très fin. Cela peut être aussi simple que contrôler l’affichage d’un bouton pour l’utilisateur, mais il s’agit essentiellement d’une restriction sur les requêtes de l’interface back-end. Par exemple, si vous demandez une liste mais que vous n'avez pas l'autorisation, vous ne pourrez pas la demander et une erreur 401 sera signalée. 🎜🎜🎜🎜nous Selon les besoins, les utilisateurs peuvent être limités à la visualisation ou à d'autres opérations en fonction des différents rôles des utilisateurs. Cependant, cela n'est pas raisonnable. Les utilisateurs peuvent lancer des demandes via des outils tels que postman au lieu de passer par le système. Par conséquent, nous devons-🎜🎜🎜 imposer une couche de restrictions sur le backend🎜🎜🎜Nous obtenons les autorisations d'interface renvoyées par le backend, comme recevoir les données suivantes :🎜rrreee🎜Après avoir obtenu les données, nous le faisons avec le contenu enregistré par le frontend Comparez puis contrôlez selon les conditions L'interface doit restreindre l'accès en conséquence, plutôt que de simplement porter des jugements frontaux. 🎜rrreee🎜🎜Jugement frontal simple : 1. Pas facile à maintenir 2. Dangereux, les utilisateurs peuvent demander dans tous les navigateurs🎜🎜🎜[Fin]🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!