casl库控制用户权限_使用CASL在Vue中管理用户权限

最新推荐文章于 2024-04-09 12:25:23 发布

culiu9261

最新推荐文章于 2024-04-09 12:25:23 发布

阅读量1.8k

点赞数 1

文章标签：数据库 vue python java javascript ViewUI

原文链接：https://scotch.io/tutorials/managing-user-permissions-in-vue-using-casl

版权

casl库控制用户权限

There is one thing we can all agree on, no matter what language or platform we prefer for building applications — there has to be some form of control and access levels in our applications to ensure it runs smoothly. This is why the concept of user permission will quickly become commonplace for you once you build your first application.

无论我们希望使用哪种语言或平台来构建应用程序，我们都可以达成共识-我们的应用程序必须具有某种形式的控制和访问级别，以确保其平稳运行。这就是为什么在您构建第一个应用程序后，用户权限的概念很快就会变得司空见惯的原因。

In server-side languages, user permissions can be done with little or no fuss. You can use sessions to hold a user’s information and there would be over a hundred libraries begging for the opportunity to help you manage what the user sees and when the user sees it. You can manage complex permission logic with the aid of a robust database.

在服务器端语言中，用户权限可以花很少的功夫就可以做到。您可以使用会话来保存用户的信息，届时将有一百多家图书馆寻求帮助您管理用户看到的内容以及何时看到它的机会。您可以借助强大的数据库来管理复杂的权限逻辑。

For JavaScript, this becomes a little tricky, given that all you may have to achieve this localStorage. In this tutorial, we will explore how we can manage user permission for our JavaScript application using CASL.

对于JavaScript，鉴于您可能需要实现此localStorage，所以这变得有些棘手。在本教程中，我们将探索如何使用CASL管理JavaScript应用程序的用户权限。

什么是CASL ( What is CASL )

CASL is an authorization JavaScript library which lets us define what resources a given type of user can access. CASL forces us to think about permissions in terms of abilities — what a user can or cannot do vs roles — who is this user. In defining the abilities of a user, the user role can be composed.

CASL是一个授权JavaScript库，通过它我们可以定义给定类型的用户可以访问哪些资源。 CASL强迫我们根据权限（用户可以做什么或不可以做什么vs角色）来考虑权限，即该用户是谁。在定义用户的能力时，可以组成用户角色。

入门 ( Getting Started )

We will use an authenticated Vue application we previously created so we can speed things up. In Vue Authentication And Route Handling Using Vue Router, we had created an application with different user types. For this tutorial, we will extend the application to add a page with blog posts that can only be edited by the creator.

我们将使用先前创建的经过身份验证的Vue应用程序，以便加快处理速度。在使用Vue Router进行Vue身份验证和路由处理中，我们创建了具有不同用户类型的应用程序。对于本教程，我们将扩展该应用程序以添加一个页面，其中包含只能由创建者编辑的博客文章。

Clone The Repository For The Project

克隆项目存储库

$git clone https://github.com/christiannwamba/vue-auth-handling

Install Dependencies

安装依赖项

$npm install

Install CASL

安装CASL

$npm install @casl/vue @casl/ability

We have all the basics we need setup now. Let’s proceed to make the components for our application. We are working off an existing project, so this will save us a lot of time. We need to add 2 new components to the project to enable us to create blog posts and view blog posts.

我们拥有了现在需要设置的所有基础知识。让我们继续为我们的应用程序制作组件。我们正在处理一个现有项目，因此这将节省大量时间。我们需要向项目中添加2个新组件，以使我们能够创建博客文章和查看博客文章。

BlogManager ( The BlogManager )

First, create a file BlogManager.vue in the ./scr/components and add the following to it:

首先，创建一个文件BlogManager.vue在./scr/components及以下添加到它：

<template>
    <div class="hello">
        <h1>Create New Blog</h1>
        <form @submit="create">
            <input class="form-input" type="text" placeholder="Blog Title..." v-model="blog_title">
            <textarea class="form-input" v-model="blog_body" placeholder="Type content here"></textarea>
            <button>Create</button>
            <br/>
        </form>
    </div>
</template>

This creates a simple HTML page with a form for our application. This is the form for creating a new blog post.

这将为我们的应用程序创建一个带有表单的简单HTML页面。这是用于创建新博客帖子的表格。

We need to create the data attributes to bind the form fields:

我们需要创建数据属性来绑定表单字段：

[...]
<script>
  export default {
     
      data () {
     
          return {
     
              blog_title: null,
              blog_body: null
          }
      },
  }
</script>

Let’s create the method that handles form submission:

让我们创建处理表单提交的方法：

<script>
  export default {
     
      [...]
      methods : {
     
          create(e){
     
              e.preventDefault()
              let user = JSON.parse(localStorage.getItem('user'))
              this.$http.defaults.headers.common['x-access-token'] = localStorage.jwt
          }
      }
  }
</script>

We have created the method and parsed the user string we stored in localStorage. This user string will come in handy when we are sending our form data to the server. We also setup the default headers for our http request handler — axios. Some of our endpoints require an access token to work, which is why we need to set it.

我们已经创建了方法并解析了存储在localStorage中的用户字符串。当我们将表单数据发送到服务器时，该用户字符串将派上用场。我们还为http请求处理程序axios设置了默认标头。我们的某些端点需要访问令牌才能工作，这就是为什么我们需要设置它的原因。

In the Vue Authentication … tutorial, we had explained how we made axios globally accessible by all our Vue components.

在Vue Authentication…教程中，我们解释了如何使axios可以被所有Vue组件全局访问。

Now, let’s send the blog post data to our server:

现在，让我们将博客文章数据发送到我们的服务器：

<script>
  export default {
     
      [...]
      methods : {
     
          create(e){
     
              [...]
              this.$http.post('http://localhost:3000/blog', {
     
                  blog_title: this.blog_title,
                  blog_body: this.blog_body,
                  created_by : user.id
              })
              .then(response => {
     
                  alert(response.data.message)
                  this.blog_title = null
                  this.blog_body  = null
              })
              .catch(function

最低0.47元/天解锁文章

culiu9261

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
casl库控制用户权限_使用CASL在Vue中管理用户权限

casl库控制用户权限There is one thing we can all agree on, no matter what language or platform we prefer for building applications — there has to be some form of control and access levels in our applications ...
复制链接

扫一扫