0

2 years agoby Mauryavanshi Narendra

How to integrate role based multi-authentication on Vue.js front end and Laravel back-end app?

I'm working on project in which I have to create role-based authentication system. I was successful in developing the multi-authentication on Laravel app but it was to messy and the performance was lagging so now i want to implement Vue components in the front end but nor able to figure out how to make it?

22

Sarthak replied 2 years ago

1

I think for vuejs you want to hide or show some components/views according to the role. If this is the case then you need to setup an window object in your app.js file which decides if logged in user is allow to visit some part of your app or not.

To do this you can just get logged in user information by ajax or you can get that details while your root vue component loads like

<app-root :loggedInUser="{{auth()->user()}}"></ap-root>

and now you can get the data on your component as a props

// on your app root component
<script>
	export default {
		props:['loggedInUser'],
		...
	}
</script>

this will get data from laravel to vuejs

then after when you get user details you can again go to that component and create a window object like

// on your app root component
<script>
	export default {
		props:['loggedInUser'],
		created(){
			if(this.loggedInUser.admin == true){
				window.canView = true
			}else {
				window.canView = false
			}
		}
		...
	}
</script>

and now as you have canView data you can use it anywhere, where you want to show/hide something according to permission user have.

Ask Question
Most Visited
Categories