Question

我正在尝试将CASL集成到我的角度应用程序中。我不知道如何整合它。

// 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/angular”给出的所有步骤。我收到“未捕获的错误：无法解析会话：（？）的所有参数。 '这个错误。我不了解它有什么问题以及如何集成此软件包。请帮忙。预先谢谢你。

Answer 1

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

遍历此示例以了解角度和其他技术例子很简单，足以理解事物

您可以与其他受让人一起添加Todo任务，但只能删除和更新仅分配给我和管理员角色的任务。

casl与angular 6集成

1 个答案: