Published at DZone with permission of Anthony Gore, DZone MVB. , Chapter 3: Get Started with Vuex, Vue Router, and JS API Requests, Chapter 5: Forms and Laravel Relationships and VueJS Tag Input, Chapter 8: Working with User Profiles and Permissions, Chapter 10: Building an Administration Section.

With that, we have a really nice way of managing user permissions in a simple Vue app.

So for the directive, we have to figure out a syntax that covers the following: verb, object, hide option (the default) and an option to disable. The three properties required for permissions objects are: role - …

For more information on how our permission structure is set up, check out Planning your Laravel and VueJS SPA Application Admin Section. We add directives using Vue.directive(). In a real application, after a user deletes a post in the front-end, we'd use AJAX to send the delete instruction to an API, e.g.

This will be better understood when we use it in the main app, below. CASL allows you to define a set of rules which restrict what resources a given user is allowed to access.

So this example involves limiting what can be updated on an entity based on user permission.

If they do have permission, we can take some action. Access Control Using Permissions and Roles in Vue, How to Validate Email Address with JavaScript, Let’s define our application routers by creating a new file, We log in the user by submitting a POST request to, Does the route require the user to be logged in? Let's define our user permissions in a file resources/ability.js.

In a real application, after a user deletes a post in the frontend, we'd use AJAX to send the delete instruction to an API, e.g.

Using a callback is a way to expose what is relevant to configure the plugin, and hide away everything else. ACL in the browser is mostly there for UX purposes and is no replacement for checking permissions in the backend.

Update happens as data changes through the reactiveness of Vue — from user input or some side-effect. In a real app, we'd get this user data from the server. Define the current user. Now when the user on the front end submits this form, if they are an owner, they should be able to adjust what they want about the meta, but if they are an admin or super admin they should be able to add and remove owners.

Once you've defined your permissions with CASL, and set an active user, you could change the above example to something like this: In this article, I'll demonstrate how to manage permissions in a frontend app with Vue.js and CASL.

but we want admins and super admins to change owners. vue-cli is a command-line tool provided by Vue.js to quickly create and bootstrap Vue Single Page Applications. Builder, creator, and maker.

In this file, we load the company being viewed/edited. At the end of this article, we will end up with Vue directive that looks something like this: This is not an article about ACL best practice, but a guide to how you can make your code more readable and pleasant to work with for others and your future self. This is what CASL can do for us. Posts are displayed in our app via a component called Post. With that, we have a really nice way of managing user permissions in a simple Vue app.

Unlike Laravel, Vue is just a UI framework and comes with no routing functionality by default.

In the above code, we define a single rule — a rule for checking if a user may edit a post or not. Now, let’s begin implementing access control using permissions and roles in Vue! See the original article here. Vue SPA – Roles and Permissions Overview. If we didn't do this, any post could be updated or deleted by any user, not just the owner. Note: you don’t have to have used CASL before to follow this! This is what CASL can do for us.

Looking at the second argument to the define method, we define permission rules by making calls to can. The dashboard shows only those functionalities to which the User has access from the backend! We can now get started with implementing our access control logic. Vue.js Role Based Access Control Project Structure.

The owner should see if there are other owners on the coffee shop. Managing permissions in a … CASL is an authorization JavaScript library which lets us define what resources a given type of user can access. vue.js authentication In authenticated frontend apps, we often want to change what's visible to the user depending on their assigned role. A directive can have multiple modifiers.

This is what CASL can do for us. As a demonstration, I've made a simple server/client app which shows classified ad posts. An obvious set of rules for this app would be: In CASL, we use AbilityBuilder to define the rules. Opinions expressed by DZone contributors are their own. Managing User Permissions in a Vue.js App Managing User Permissions in a Vue.js App Learn how to restrict user permissions using Vue.js and …

But, more importantly, I also like teaching others what I know by blogging about things that I learn at work everyday!

that a post can be deleted by a user. The SPA has functionalities such as login, dashboard, roles, and permissions. a post, a comment, an article etc). What if we want to display or hide certain elements in our view depending upon the user’s permissions? When CASL checks an entity to determine permission, it needs to know the type of entity it's looking at.

There are many approaches to ACL. They may be retrieved from a database and then passed to the front-end by the server, for example. This was an exercise for me in sharing my experiences developing this Vue directive.

There are a lot of times where situations like this may occur. To clarify, we set up three types of roles, namely, Super Admin, User Manager, and Role Manager.

If you got this far, thank you for your attention :). Directives and mix-ins alike are plugged into Vue by calling use(plugin). The vue-router package provides a handy routes.beforeEach() method where we define our access control logic. Notice that in the second can function call, we pass a third argument; an object. Mix-ins allow us to consolidate all the access code in one place and make it available from all Vue components. This will be better understood when we use it in the main app, below. For more examples, and a larger scaled application, we are writing book about how to do API Driven Development within a Single Page Application and will go through a much more detailed process. could be shown.

(. Marketing Blog. Default to hide: First, we check to see if the disable modifier is there. We then use CASL to check if the current user has permission for this operation via this.$can('delete', post). Take a look at the code first, then we’ll break it down below: When the user clicks the Delete button, the click is captured and the del handler method is called. This allows us to only register the modules if the user is an admin and they need to use admin data. We will implement this using an update function but we will cover the second option in the directive’s lifecycle section below. The point is that for the verb edit we will need an instance of a post to determine the permission. For example, CASL rules can indicate which CRUD operations (Create, Read, Update and Delete) a user can undertake on a given resource or entity (e.g. could be shown.

For example, a guest user might be able to see a post, but only a registered user or an admin sees a button to edit that post. v-if allows us to render an HTML element in our Vue application conditionally.

: You can find out more about CASL by checking the official docs. This was the example we started out with — accompanied with a few other familiar “faces”: To break it down further into detail, the directives above are: v-can with an argument delete and an the value expression post.

In a real application, after a user deletes a post in the frontend, we’d use AJAX to send the delete instruction to an API, e.g. For our example, we'll simply hard-code it. Perfect. Let’s define our user permissions in a file resources/ability.js. Update Vue Router Links; Run The Application; Conclusion; What is CASL. We'll need to make sure this property is present when we define our Post objects in a moment. I believe this.$can('delete', post) is much more elegant than: This is not only more difficult to read, but also, there’s an implicit rule here i.e. This is fundamentally the same problem as #1, but sometimes devs may do it without realizing.

We install vue-cli in our system using npm so that it is globally available in all our terminals. It can be an email, an object, a role, or even null. Import our rule set into the Vue app (i.e. Essentially the highest level of confidence you can have is by blocking this code, it makes the UX easier for the authenticated user.

When CASL checks an entity to determine permission, it needs to know the type of entity it’s looking at.

A very similar functionality takes place where we have a policy that either allows or blocks whether or not the user can promote to and admin/super admin, or not.

When CASL checks an entity to determine permission, it needs to know the type of entity it's looking at. el is the DOM element and vnode is Vue’s virtual dom node (you can access data properties from there). Once you’ve defined your permissions with CASL, and set an active user, you could change the above example to something like this: In this article, I’ll demonstrate how to manage permissions in a frontend app with Vue.js and CASL. An important point is that the Post argument is only used to tell that the rule is about posts and it is not used in the code that determines the permission; only the user is.

So feel free to contact me for any help or suggestion that you may want. Accessing permission rules in VUE.js. It’s been quite a process adding an administration section to the app.

However, for most directives, you’ll only ever use two of them: bind and update. And Eslint is an ES6 linter used to maintain code coherency and better coding practices across your project. (I’ll refer to both approaches as mix-ins for simplicity).

Note that our Vue application is a standalone application built with vue-cli, intended to be running on a different server than our API. For example, a guest user might be able to see a post, but only a registered user or an admin sees a button to edit that post. Vue user permissions through directives. The actions can be anything really: create, view, edit, delete, transfer, send, manage members, etc. Just like a Vue component has lifecycle hooks (created, mounted, before*, etc.)

vue permissions

It nicely describes what the directive does: a binding for what happens when the key is released. The Overflow Blog Can one person run an open source project alone?

Now that we have set up our routes, we need to define our Login.vue and set up the logic so that a user can log in.

Mix-ins are a great way to leverage code duplication.

you can write v-can="'create Post'" and there is an option to pass verb, object and additional arguments to the rules using an array notation. Otherwise, it would keep living in the browser, taking up a hardware audio channel.