I have two separate projects. One is Laravel for RESTful API and the other is Vue SPA.
If the frontend is also handled by Laravel, then handling role and permissions is easy since we can use the can() and hasRole() method Spatie Permission provided.
However, we can't access this value in Vue SPA directly from the backend.
Is there any way I can control the permission in Vue SPA?
Thanks
Yes, you can send to the client, after a successful login, the user' data plus his roles and permissions, and create a Vue component named Can, for example, that only show something if the user has the role or permission to do so.
<can permission="post.delete">
<v-btn>Delete record</v-btn>
<can>
The Can component access the user data (which includes his roles and permissions) and check if the user has the ability to see the underlying content.
Related
I have two table users and role and I need to log in using Laravel fortify only if user role is admin or showing error. I tried to do that using middelware, but i need to add the condition: If the user is not admin, he cannot log in.
You can read at laravel docs:
https://laravel.com/docs/8.x/fortify#laravel-fortify-and-laravel-sanctum
Some developers become confused regarding the difference between Laravel Sanctum and Laravel Fortify
And:
If you are attempting to manually build the authentication layer for an
application that offers an API or serves as the backend for a single-page
application, it is entirely possible that you will utilize both Laravel Fortify
(for user registration, password reset, etc.) and Laravel Sanctum (API token
management, session authentication).
Then you want to check role of user, you should use Laravel Sanctum
I'm building a SPA using Vuejs and consuming Laravel API's, and users can have multiple roles, what is the best way to save token and user roles? as well as prevent users from knowing what the roles are?
There is one solution I know yet, which is to save them in Cookies and LocalStorage.
However, if someone knows my LocalStorage key for the roles and they were just like a normal user and changed it, so that they can see what Admin Dashboard looks like (Just the Front-End) and what Admin can see in the app.
How can I prevent them? and what are the best ways to secure SPA?
Thank you in advance.
You can never consider SPA frontend as "secure". If something is executed on browser it means it can be modified by user. It of course doesn't mean SPA is bad, no no, just it is not good solution for every project.
If You want to be sure that user will never see admin dashboard then it should be in separate bundle or even better - separate project.
Instead - consider migrating SPA to SSR (in Vue You can use Nuxt.js (https://nuxtjs.org/) for this).
Thank's to this user will receive only HTML response (just like in Laravel with Blade). Because of this You can authenticate user and check roles BEFORE user will receive any content (and block access to admin panel by that).
BUT - if You are using Laravel with Vue in same project (so Vue is initiated by Blade) this means You can just like in Nuxt check user before it will receive any content. Just make middleware for it. But it will help only by blocking entire page, and not for changing (in secure way) content on single page based on multiple roles. So again - You need SSR for that.
For any every solution I would suggest You to use new official library from Laravel - Sanctum (https://laravel.com/docs/7.x/sanctum).
Laravel API use role and permission to check user is can do something.
Client save jwt token and use jwt to authen Laravel API. You will get user info in laravel side. Use user id check in role table.
I'm using Laravel 7.3 as backend (admin panel) and API, and I have a multiple Nuxt websites authenticating with Laravel Passport. So I have the default User model for admin panel users and other user models, one for each Nuxt website. But Laravel Passport seems to be only working with the default User model.
How should I authenticate the users of the different Nuxt websites in such configuration ?
There are 4 functions that exist on the Passport Facade:
Passport::useClientModel(Client::class);
Passport::useTokenModel(TokenModel::class);
Passport::useAuthCodeModel(AuthCode::class);
Passport::usePersonalAccessClientModel(PersonalAccessClient::class);
You need to implement logic that ties your frontend model relationship to your backend, and instantiate the correct model for the given passport methods inside of a service provider.
Hi I'm building an app with Larval and vue.js. This app is not a fully single page application but is a combination of vue and blade.
For example, the dashboard or login page and some other pages are SPA-based and are fully implemented with vue. But the landing page and some other pages have been created by blades that may have used vue components in some of them.
My question is about authentication in such cases. Is laravel passport appropriate for such cases? Or should I use jwt or something else? Because I need authentication on both types of pages (Vue-based, Blade-based). And it's done on almost every page.
On the other hand, I used laravel-permission - Spatie to control permissions and roles. Is it possible for passports to define roles and permissions and control based on them? I mean displaying or hiding elements and links, accessing certain sections, or doing some work with permissions checking.
What resources do you offer to start learning how to develop authentication and authorization in such apps?
Edit:
Maybe there was some ambiguity in my question, so I'll explain a little more. Suppose our website has three parts:
The first part that includes landing page, display of a post, display of all posts and more. This section is implemented by blade and may also use vue components.
The second part is the user profile page of the site where users can edit their own information, view their posts and edit them, view registered comments and more. This section is SPA and is fully implemented with Vue and only logged in users can see it.
The third part is the admin dashboard page, which is needed to manage different sections, apply settings and more. This section is also SPA and fully implemented with Vue. In this section, only users with the Administrator role are allowed, and each one can perform certain tasks based on the permissions given to them. This means, it must be checked whether the user is allowed to see a section or perform a specific task, or not.
Routing is also performed by vue on the user profile and admin dashboard pages, and actions are performed by axios and sending requests to apis written in laravel. And all three parts are in the same application.
So the question is, how should Authentication and Authorization be done in this scenario? Is laravel-passport appropriate for this task? Is it possible to do both in laravel-passport? For example, Authorization is going to be done in the front-end section by vue, how should this be done? Is it possible to combine laravel-passport and laravel-permission - Spatie? Or do we need it at all? Perhaps the more general question: Is this scenario reasonable?
You can use the intermediate approach, blade login/register and the Laravel passport middleware https://laravel.com/docs/6.x/passport#consuming-your-api-with-javascript.
This Passport middleware will attach a laravel_token cookie to your outgoing responses. This cookie contains an encrypted JWT that Passport will use to authenticate API requests from your JavaScript application. Now, you may make requests to your application's API without explicitly passing an access token
Spatie permission is great for managing permissions and roles. You can protect your api routes with middleware or checks in your controller.
You making it too complicated. if you are calling your vue components in blade file you don't need passport at all but if your front end is separate from back end then you need to use passport because you don't have access to session...
On the other hand, I used laravel-permission - Spatie to control permissions and roles. Is it possible for passports to define roles and permissions and control based on them?
Passport doesn't care what kinda permission and role system you want to use you can use anything that you want
In my laravel project, I want some admin and user role. I want to make user login in different routes after login. And also for admin also. How should I do it?
You should first make 3 table in your database; user, role and user_role. user_role table has many to many relationship. Then you will make a middleware that checks your role checks when login. In your route, you use that middleware in login's post.
See details about middle ware in laravel 5.3 documentation.
https://www.laravel.com/docs/5.3/middleware
You can try laravel 5.3 boilerplate. It comes with a full featured access control system out of the box with an easy to learn API and is built on a Twitter Bootstrap foundation with a front and backend architecture.