Это видео недоступно.
Сожалеем об этом.
Laravel Vue SPA: Roles and Permissions
HTML-код
- Опубликовано: 7 сен 2020
- How to protect your SPA routes, both from the front-end and the back-end? So you need to show/hide menu items and buttons, but also secure API endpoints with Gates.
Download our solution in our QuickAdminPanel's Yearly Plan: quickadminpanel.com
The package used: www.npmjs.com/package/@casl/vue
When ever I was searching for solution, there is a video from laravel daily.
Thank you ❤️
I don''t know PHP, but your code looks really clean.
Cloning your repositories on daily basis as soon as new video gets uploaded. Thanks a lot. Enjoying VUE tutorials
Can we have the link
for my SPA i used Vuex and mixin file that was imported globaly in app.js file. In mixin file i defined my own function "can(permission_name)" that return true if user has that permission.I fetch all permission from backend in my global component with the name "App.vue" and save all permissions to my Vuex store. Then at the backend simply I used "permission middelware" in "_construct()" of each controller.
Can you share a repo with this ? I`d like to understand better the laravel part
How we can manage user permissions and roles when we have vue app separate from the backend. I use spatie permissions for user roles and permissions from the backend.
@SanjajaPrasanna03112004 did you figure it out? Looking for this now
How about permissions for a specific Posts?
I know it can be done with momentum/lock but don’t want to remodel everything to laravel/data.
Can you point me in a direction or do you know any other package?
Its like another advance level of laravel tutorial . I suscribed . Even if i still dont get the point because my known not into here yet .
I get the idea to experiment roles and permission on a vue & laravel spa by this way. But that video is not enough for starter or intermediate programmers. Can you please make a in depth video on that topic?!?
That would be life saving video, I'm struggling on that roles and permission when it comes to vue and laravel spa, for many days. 😪😪😪
Thankyou for your informative video ❤️🧡
I think I've explained it in this video as "overview", with links to what packages are used and what is the API return etc. For beginners, it usually depends on what have you tried, what are the errors, and what Auth mechanism you have - Passport/Sanctum etc. So you need debugging help, and not an in-depth video. Maybe at some point, I will add an end-to-end video with all the steps, but it would take many hours, currently not planning, have plans for other topics, sorry.
Please explain this " " can() accept 2 prams but you use only permission name (1 param). How its work ?
Thank you.
I'm wondering the same thing, it doesn't show the ./services/ability code either, and that's where everything is practically done.
@@mreduar Exactly. Looking for a snippet for it.
How to define the services/ability.js file? Help me please!
Questions:
Is possible get free exactly this project?
If paid, how to do? I can use in my job or necessary pay per year or just pay one time?
I see your website but i dont found this solution for user access.
Thanks For the tutorial, I have tried to use same concept in my application but in mine every user have only one role inside the AuthGate i used return in_array($user->role->id, $roles); but it keeps giving me 403 error. What Can i Do to fix this ?
Finally this video came out!!
Hi,Can you provide full video for this??
I already customised roles-permission in backend as laravel.
Do you have in separated react like this?
Can i use global mixin $can to replace casl vue, is that make my role and permission dynamic
Good question, never tried that, so can't answer.
Man thats awesome, recently had to do an spa with a backend in laravel and the authorization portion of it felt really rigid since I was handling a predefined set of roles and a middlewares to treat authorization, this is completely reusable
hi sir , its great tutorial.
How to implementation in vue 3 or vuetify
Sir can i ask you at 1:30 which component are you using that can hold all those chips and show you the existing one or add a new one? i recently started using vue-material and cant seem to find it :/ are you using vue-select the mulstiselect mode or vue-multiselect for this?
It's vue-select
Although this tutorial is excellent, I would want to see Spatie package roles and permissions with gate similar to this for APIs.
I really want to know more about the event hub. Would you point me to a resource to learn more about
Sir, did u use vuetify or just css bootstrap in this project? The ui looks so neat and clean.
It's a Material Dashboard from Creative Tim: www.creative-tim.com/product/material-dashboard
Hello, please share your ability.js file.
awesome as always
and what about the performance
Can I see code your ability file, please? I just can't understand how you did it in that file
Thanks. Interesting. Question: if we the middleware is doing each time SQL query it can not occurse problem with performance if the site has a lot of visitors? Is it possible to cache myabe?
One query per visitor should not be a problem, in 99.99% of cases.
@@LaravelDaily Thx
Actual life saver
Guys PLZ pay attention that this video is bit old and VUE CASL is now at v5 and has different initialization file.
hello sir how to configure with vue3 please
Reload all permission on every change, I think it is not good, maybe when you api return forbidden then you need to refresh vue permissions, what you think?
Good question, it's a personal opinion. Let's put it this way - I don't see anything wrong in additional quick API request every time. If you think that is a problem, then sure, save it locally.
hi can you do like this tutorial but for PHP please. appreciate your fast response
Hi thanks for this amazing tutorial. I have a problem. I don't know how to setup the ability plugin and you didn't explain services/ability file. With the package install I didn't get that file. Can you explain why I didn't get that file and how I can create/get that file
Thanks
github.com/LaravelDaily/QuickAdminPanel-Vue-Example/blob/master/resources/adminapp/js/services/ability.js
@@tonymyersnz Thanks mate for the file, Cheers!
Is there any package for angular frontend?
I am also looking same solution for my Angular project.
this is abit complicated to understand at first glance. But looks a great soluution
Hi povilas. Do you have this repo on your github? Would be very helpful
No, sorry
Could you pls make full tutorial?, thanks.
How I should it do it with NUXT?
Thanks
Why are you using abort_if in your controllers when you can just return false?
I mean the form request, and specifically, the authorize method.
In Controllers, abort_if is returned with a specific code of 403 forbidden, return false wouldn't return that coe.
But if you're talking about the Form Requests, then yes, we have plans to change it.
Do you cover this in deep on your laravel vue spa Course?
No, that Vue SPA is only for simple CRUD, without permissions. I'm planning to shoot a separate more in-depth course about it, but procrastinating on that, while shooting daily videos on youtube :)
Hi, when you can Update Vue.js + Laravel: CRUD with SPA Course
Currently not planning to update that one, planning to create a separate, more advanced, course. But for now, focused on RUclips and QuickAdminPanel, so can't find enough time for courses, unfortunately.
@@PovilasKorop So, we must pay again for new course? I thought, you will complete this course and add new lessons to this course. :-(
@@amindolati4645 as a CRUD course, that course is complete. I never planned to have the same course expanded with more topics. I planned different SPA-related courses, more advanced, with roles/permissions and Vuex.
Is this with Laravel 7?
Do you have source code sir? Can you share it?
Now just waiting of how to set up correctly Sanctum hehe
Not a big deal
plis make the same tutorial but using livewiree, thanks
hello, how can i get its source code of this tutorial ?
There's no public source code, you need to purchase 2019.quickadminpanel.com
@@PovilasKorop ok i return array of logged in user permissions when user logged in so how can i use those permissions in vue casl for implementing permissions in vue ? guide me please
Hello there! is there a course i can buy from you on this subject?
Hi, no, sorry I don't have a course on this
@@PovilasKorop Im making an admin/users panel for data management and the main page where the clients can see the updated info ,
im using vue-router, have 3 main routes in my web,
/dashboard/admin/{any} for admin, /dashboard/{any} for all other users and /{any} where the clients can see the web page...How could i protect the routes in this manner?
i have spaties roles and permission and laravel passport working, since its a multi tenant app on the admin side i have scopes where each user can see only the data that corresponds to the id of his/her hotel....but in the clients side i dont want that, just by changing the url you can see one hotel or the other...Any ideas? Thanks in advance!
@@kristofszobacsi5123 Well, if you have spatie roles and permission, then clients should not see the hotel just by changing the URL, it should be protected somehow, but not sure in what logic. Do you have clients roles and permissions, too? I'm afraid I can't answer this question properly with some general advice without digging deeper into your code. Generally, the vue-router should load the route anyway, but the data should come from the back-end and should be protected, so without permissions person can type any URL and would see just blank design but without data.
@@PovilasKorop Hello there! The clients can see the data from the hotels based on the url /tenerife /ibiza etc... because that /{any} is not protected by middleware, just the dashboards are ---> /dashboard/admin/{any} for admin, /dashboard/{any} these...The thing is when i create a user i give him cretain hotel_id, so in the global scope i configured it so that user can see the appropiate data, but ofcourse without passport and spatie if they put something in the url they can still see the data, i fixed that now they see only the sidebar and header menu...but i want to throw them a blank page saying you dont have authorization to watch this hotel or somthing...And i dont know how i can protect the routes on my vue router...since the data is rendering based on the this.$route.params.facility_id for example...And this cant be controlled like this
['middleware' => ['auth:api', 'role:Admin', 'permission: hotel_access'] because its already inside a component rendering in /dashboard/{any}....
@@kristofszobacsi5123 No, vue router doesn't know anything about the back-end permissions, it's a front-end code. Sorry it's hard to help in a short youtube comment here, this question is not a 1-minute answer. But generally, you need to call the API for permissions on every route, and then change the page accordingly.
Where is the find source code ?
There's no source code this time, it can be generated only with our quickadminpanel.com
Give please source code
Can you provide github project link?
There's no github link this time, you can generate it only at our quickadminpanel.com in yearly plan
github.com/LaravelDaily/QuickAdminPanel-Vue-Example
Authorization......