2

我正在尝试将 CASL 集成到我的 Angular 应用程序中。我不明白如何整合它。

// Login Conponent

ngOnInit() {
  var jsonBody = {};
  jsonBody['email'] = 'peter@klaven';
  jsonBody['password'] = 'cityslicka';

  this._session.login(jsonBody)
}

//session.ts

import { Ability } from '@casl/ability'
 
export class Session {
  private token: string
 
  constructor(private ability: Ability) {}
 
  login(jsonBody) {
    return fetch('https://reqres.in/api/login', { method: 'POST', body:  JSON.stringify(jsonBody) })
      .then(response => response.json())
      .then(session => {
        this.ability.update(session.rules)
        this.token = session.token
       })
  }
 
  logout() {
    this.token = null
    this.ability.update([{ actions: 'read', subject: 'all' }])
  }
}

// Ability.ts

import { AbilityBuilder } from '@casl/ability';
 
export const ability = AbilityBuilder.define(can => {
  can('read', 'all')
})

// can pipe

import { CanPipe } from '@casl/angular'
import { Pipe } from "@angular/core";

@Pipe({ name: 'can' })
export class MyCanPipe extends CanPipe {}
<div *ngIf="'Post' | can: 'create'">
  <a (click)="createPost()">Add Post</a>
</div>

在上面的代码中，我添加了能力、会话、可以管道、HTML 代码等所有必需的文件代码。我遵循了库给出的所有步骤' https://www.npmjs.com/package/@casl /角'。我收到“未捕获的错误：无法解析会话的所有参数：（？）。'这个错误。我不明白它有什么问题以及如何集成这个包。请帮忙。先感谢您。

4

1 回答 1

0

https://github.com/stalniy/casl-examples/tree/master/packages/angular-todo

通过这个例子来了解角度和其他技术 例子非常简单，足以理解事物

您可以添加具有不同受让人的 Todo 任务，但您只能删除和更新仅分配为我和管理员角色的任务。

于 2020-08-14T12:49:21.893 回答