casl与angular 6的集成

Question

我正在尝试将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>

​

在上面的代码中，我已经添加了所有需要的文件代码，能力，会话，can管道，超文本标记语言代码等。我已经遵循了库'https://www.npmjs.com/package/@casl/angular‘给出的所有步骤。我收到“未捕获错误:无法解析会话的所有参数：(?)”。这个错误。我不明白它有什么问题&如何集成这个包。请帮帮忙。提前谢谢你。

Answer 1

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

这个例子对于angular和其他技术的例子是非常简单的，并且足以理解事物。

您可以添加不同任务接受者的待办事项任务，但您只能删除和更新仅分配为我和管理员角色的任务。